Oil Monkey-Skriptentwicklung, wie man HTML und CSS hinzufügt

Einführung

Oil Monkey ist ein Skriptmanager, der es uns ermöglicht, ganz einfach JS-Skripte zu verwenden, um Seiteninhalte zu ändern, Funktionen zu verbessern oder andere benutzerdefinierte Vorgänge durchzuführen.

Gemeinsamer Skriptmanager

• Tampermonkey
  ist wahrscheinlich das Programm, das Sie am häufigsten sehen und das bekannteste. Es ist einfach zu verwenden, stabil und unterstützt mehrere Browser.
• Der Vorfahre des Greasemonkey-
  Benutzerskripts wird von uns immer als Greasemonkey bezeichnet, aber es unterstützt Firefox
• Violentmonkey
  ist ein von Chinesen entwickelter Skriptmanager, der direkt mit dem aktuellen Site-Suchskript übereinstimmen kann.

Hier stellen wir hauptsächlich Tampermonkey vor

Offizielle Dokumentation: Tampermonkeys Dokumentation

Entwicklungsumgebung

1. Dieser Artikel basiert auf dem Chrome-Browser
2. Installieren Sie die Erweiterung tempermonkey
3. Stellen Sie den Texteditor auf vscode ein (Sie können die Einstellungsmethode in „require“ sehen, keine Sorge)

Dateistruktur

Öffnen Sie Oil Monkey, fügen Sie ein neues Skript hinzu und Sie erhalten die folgende Oberfläche

Der obige Kommentarteil heißt Metadaten und wird vom Oil Monkey Script Manager analysiert, gefolgt von unserem eigenen JS-Code.

Später werde ich die Rolle von Metadaten und einfachen Funktionen vorstellen, die von js implementiert werden.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2023-12-29
// @description  try to take over the world!
// @author       You
// @match        https://www.tampermonkey.net/documentation.php
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function() {
    
    
    'use strict';

    // Your code here...
})();

Metadaten

Das Wesentliche sind einige Konfigurationsoptionen von Oil Monkey

übereinstimmen

Das heißt, es wird zum Abgleichen von URLs verwendet. Sie können wie folgt den regulären Abgleich verwenden

// @match https://www.baidu.com/

erfordern

Für andere Skripte, die Abhängigkeiten angeben, können Sie die URL der lokalen Datei verwenden, um das Skript mit vscode zu bearbeiten.

Einstellungsmethode

1. Öffnen Sie die Einstellungen der Oil Monkey-Erweiterung und aktivieren Sie die Option , um den Zugriff auf Datei-URLs zuzulassen
2. Fügen Sie wie folgt Elemente hinzu, die eine Abhängigkeit vom lokalen Skriptpfad erfordern

// @require file://D:\code\html\js\tempermonkey.js

gewähren

Greasemonkey bietet viele leistungsstarke APIs, die wir bequem über Grant nutzen können.

Wenn Sie diese APIs nicht verwenden möchten, sollten Sie dies deklarieren@grant none

Im Folgenden finden Sie eine einfache Tabelle, die Ihnen hilft zu verstehen, was die API von Greasemonkey leisten kann.

| Beschreibung |
| --------- | -------- - ------------------------------------- |
| GM.info | Gibt Metadaten für das aktuelle Skript zurück |
| GM_addStyle | CSS zur Webseite hinzufügen |
| GM.setValue | Speichern Sie den Wert lokal (kann nur eine Zeichenfolge sein). Sie können sich diesen Speicher als dasselbe vorstellen wie localStorage |
| GM.getValue | Den gespeicherten Wert abrufen |
| GM.deleteValue | Den gespeicherten Wert löschen |
| GM.listValues ​​​​| Gibt ein Array zurück, das aus den Schlüsselnamen aller gespeicherten Werte besteht |
| GM_getResourceText | Ruft den Ressourceninhalt von @resource ab, der in den Metadaten definiert ist |
| GM .getResourceUrl | Metadaten abrufen. Die URL der @resource-Ressource, die in (Base64-codierte data:Protokolladresse) definiert ist. |
| GM.openInTab | Die angegebene Adresse in einem neuen Tab öffnen (wird verwendet, um die Einschränkungen von Chrome zu umgehen, die alle Nicht-Benutzer-Trigger verhindern window.open) |
| GM_registerMenuCommand | Xiangyou Skriptanweisungen zum Monkey-Plug-In-Menü hinzufügen (wird normalerweise zum Öffnen einer selbstgeschriebenen Einstellungsschnittstelle oder zum Ausführen von Code verwendet) |
| GM.setClipboard | Kopieren Sie den angegebenen Inhalt in die Zwischenablage |
| GM.xmlHttpRequest | Netzwerk senden Anfragen und erlauben Cross-Domain |
| GM.notification | Browser-Benachrichtigung |

unsicheres Fenster

Wenn Sie beim Schreiben eines Skripts versuchen, globale Webseitenvariablen direkt über das Fenster hinzuzufügen oder darauf zuzugreifen, werden Sie feststellen, dass dies keine Auswirkung hat.

Dies liegt am Sandbox-Mechanismus von Greasemonkey. Niemand kann über das Fenster direkt auf die API von Greasemonkey oder die Variablen im Skript zugreifen, was die Sicherheit gewährleistet.

Wenn Sie wirklich auf das Fenster zugreifen müssen, können Sie unsafeWindow verwenden. Im offiziell veröffentlichten Skript sollten Sie jedoch keine Grease Monkey-API oder Variablen im Skript dem Fenster dadurch zugänglich machen.

CSS zitieren

Quoting JS kann verwendet werden @require, CSS jedoch nicht

Es gibt zwei mögliche Methoden

1. Der alte Weg: Verwenden Sie JS, um <head>CSS einzufügen<link>
2. API-Methoden: Deklarieren Sie sie in den Metadaten // @resource mycss <地址>und vergessen Sie nicht GM_addStyle(GM_getResourceText('mycss'));
   , auch die beiden verwendeten APIs @grantzu deklarieren .

Gemeinsame Metadaten

@name：脚本的名称
@namespace：脚本的命名空间，通常是一个URL，一般写作者个人网址
@version：脚本的版本号
@description：脚本的描述
@author：脚本的作者
@match：脚本的匹配模式，用于指定脚本要运行的页面URL。它可以使用通配符、正则表达式或具体的URL等多种方式来匹配URL。
@grant：脚本的授权级别，用于指定脚本是否需要访问浏览器的某些特殊权限，例如访问页面的cookie或执行跨域请求等。它可以设置为none、unsafeWindow、GM、GM_setValue等多种级别。
@run-at：脚本运行的时机，用于指定脚本是在文档加载之前、文档加载时或文档加载之后运行。它可以设置为document-start、document-body、document-idle或context-menu等选项。
@noframes：指定脚本是否在框架页面中运行。设置为true时表示脚本不在框架页面中运行，默认为false。
@require：指定脚本依赖的其他脚本。它可以使用多个URL来引入其他脚本，并指定它们的执行顺序。
@resource：指定脚本中使用的资源文件，例如图片、样式表、字体等。
@connect：指定脚本是否允许跨域请求。
@include：同@match，用于指定脚本要运行的页面URL。

HTML-Struktur hinzufügen

Spielseite

// @match https://www.lipsum.com/

Code hinzugefügt

// 快速创建复杂 HTML 结构
function createHTML() {
    
    
    // 获取百度首页 logo 
    let logo = document.querySelector("#lg")
    // 创建一个自己的结构
    let example = document.createElement("div")
    // 给 example 这个 div 设置类名
    example.classList.add("wrap")
    example.innerHTML = `<div class="h1">标题</div>
                            <p class="des">这是一段描述</p>`
    logo.appendChild(example)

}

(function () {
    
    
    'use strict';
    console.log("learn_style")
    createHTML()
})();

CSS hinzufügen

Berechtigungen hinzufügen

// @grant        GM_addStyle

Skript

// 这里是创建 HTML 的代码，参考上一节
function createHTML() {
    
    ...}

// 添加 css 样式
function addStyle() {
    
    
    let css = `
    .wrap{
        padding: 5px
    }
    
    .h1{
        font-size: 25px;
        color: green;
    }
    
    .des{
        font-size: 20px;
        color: red;
    }
    `

    GM_addStyle(css)
}


(function () {
    
    
    'use strict';
    console.log("learn_style")
    createHTML()
    addStyle()
})();

Ausgezeichnetes Gerüst

https://github.com/kinyaying/wokoo

https://www.npmjs.com/package/create-tampermonkey

https://github.com/qianjiachun/vue3-tampermonkey

Tatsächlicher Kampf

Das folgende Skript stammt von vor langer Zeit und ist daher möglicherweise nicht effektiv. Es dient daher nur als Referenz.

// ==UserScript==
// @name         mix learn
// @version      1
// @description  Replace rate value with 16 in specific div element
// @author       Your Name
// @match        *://*.wenku.baidu.com/*
// @match        *://*.zhihuishu.com/*
// @match        https://blog.csdn.net/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

//百度文库vip,重定义函数实现直接修改pageData会失败
//需要@run-at       document-start,提前修改
//pagedata一般在script中
(function () {
    
    
    let data;
    Object.defineProperty(window, 'pageData', {
    
    
        set: v => data = v,
        get() {
    
     'vipInfo' in data ? data.vipInfo.isVip = 1 : ''; return data; }
    })
})();

//csdn
(function() {
    
    
    //去除登录键
    'use strict';
    const loginButton = document.querySelector('.toolbar-btn-loginfun');
    if (loginButton) {
    
    
        loginButton.remove();
    }
    //将代码块设置为可编辑
    const codeBlocks = document.querySelectorAll('.code-box .notranslate, pre');
    codeBlocks.forEach(function(codeBlock) {
    
    
        codeBlock.setAttribute('contenteditable', 'true');
    });
})();

//智慧树
(function() {
    
    
    'use strict';
    var targetDivs = document.querySelector('div.speedTab');
    targetDivs.forEach(function(targetDiv) {
    
    
        targetDiv.setAttribute('rate', '16');
        targetDiv.textContent = `X ${
      
      targetDiv.getAttribute('rate')}`;
    });
})();