油猴脚本的基本和进阶编写技巧

第一步：安装油猴插件

1. 打开你的浏览器（例如Chrome、Firefox）。
2. 搜索“Tampermonkey”插件并进行安装。
3. 安装完成后，你会在浏览器工具栏看到一个Tampermonkey的图标。

第二步：创建新脚本

1. 点击浏览器工具栏上的Tampermonkey图标。
2. 选择“创建新脚本”。

第三步：编辑脚本

在打开的编辑器中，你会看到一个默认的模板。下面是一个简单的示例脚本，解释每一部分的作用。

// ==UserScript==
// @name         示例脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  这是一个简单的油猴脚本示例
// @author       你的名字
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
   
    'use strict';

    // 你的代码写在这里
    alert('油猴脚本运行成功！');
})();

第四步：理解脚本结构

1. 元数据块（Metadata Block）：

   • @name：脚本的名称。
   • @namespace：脚本的命名空间，用于区分不同的脚本。
   • @version：脚本的版本号。
   • @description：脚本的描述。
   • @author：作者信息。
   • @match：匹配的URL模式，脚本会在这些URL下执行。
   • @grant：指定脚本需要的权限。

2. 脚本主体：

   • (function() { ... })();：这是一个自调用函数表达式（IIFE），确保脚本在合适的作用域内执行。
   • alert('油猴脚本运行成功！');：这是一个简单的示例代码，当脚本运行时会弹出一个提示框。

第五步：保存并测试脚本

1. 编写完脚本后，点击编辑器右上角的“保存”按钮。
2. 打开一个符合@match规则的网址，看是否弹出提示框。

进阶：添加更多功能

你可以根据需要修改和扩展脚本，例如操作DOM元素、添加按钮、修改页面样式等等。以下是一个简单的例子，修改页面背景颜色：

// ==UserScript==
// @name         修改背景颜色
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将页面背景颜色修改为黄色
// @author       你的名字
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
   
    'use strict';

    document.body.style.backgroundColor = 'yellow';
})();

好的，接下来我们继续详细讲解油猴脚本的编写和一些进阶功能。

进阶功能：操作DOM元素

油猴脚本的一大优势在于可以操作网页的DOM元素，以下是一些常见的DOM操作示例。

修改元素内容

假设你想修改页面中所有段落（<p>）的内容，可以使用以下脚本：

// ==UserScript==
// @name         修改段落内容
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改页面中所有段落的内容
// @author       你的名字
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
   
    'use strict';

    // 获取所有段落元素
    var paragraphs = document.getElementsByTagName('p');
    for (var i = 0; i < paragraphs.length; i++) {
   
        paragraphs[i].innerText = '这段文字已被修改！';
    }
})();

添加按钮并绑定事件

你可以在网页中添加一个按钮，并为其绑定点击事件，例如：

// ==UserScript==
// @name         添加按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在页面中添加一个按钮，并绑定点击事件
// @author       你的名字
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
   
    'use strict';

    // 创建一个按钮
    var button = document.createElement('button');
    button.innerText = '点击我';
    button.style.position = 'fixed';
    button.style.top = '10px';
    button.style.right = '10px';
    button.style.zIndex = '1000';

    // 绑定点击事件
    button.addEventListener('click', function() {
   
        alert('按钮被点击了！');
    });

    // 将按钮添加到页面中
    document.body.appendChild(button);
})();

修改页面样式

<