当前位置：首页 > 编程知识 > 正文

Tampermonkey插件：编写自己的用户脚本

Tampermonkey是一款流行的浏览器插件，可以用于编写并运行用户脚本，改善网站中的功能，减少广告和无用的元素，并增强个人浏览器的使用体验。Tampermonkey是以Greasemonkey用户脚本管理器为基础开发的，允许用户创建自己的脚本，以扩展网页的功能，以满足个性化需求。在本文中，我们将从不同的角度探讨Tampermonkey插件的功能，提供相关的代码示例进行讲解，以便大家更好地使用该插件。

一、安装和使用Tampermonkey

安装Tampermonkey极为简单。首先，需要在浏览器商店中搜索Tampermonkey，然后安装该插件。在不同的浏览器中，Tampermonkey的安装方法可能略有不同，但是通常情况下，都是类似的。安装完成后，可以找到Tampermonkey的图标，并单击它以打开Tampermonkey管理窗口。

要编写一个新的用户脚本，可以打开Tampermonkey的编辑器。单击Tampermonkey中的“管理脚本”按钮，找到“添加新脚本”的按钮，单击它以打开编辑器。在编辑器中，可以编写JavaScript代码，以实现自己的脚本功能。例如：

// ==UserScript==
// @name         Example Script
// @version      1.0
// @description  Example script for Tampermonkey
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    alert('Hello World!');
})();

该脚本在匹配http://example.com/*的页面上显示一个对话框，其中包含“Hello World!”消息。

二、编写各类脚本

1、页面操作脚本

页面操作脚本是最常见的用户脚本之一。它们被用于对网站进行个性化定制。例如，我们可以在一个网站上隐藏所有烦人的广告，并删除其他一些无用的元素，以更好地利用页面空间。以下是一个简单的页面操作脚本示例：

// ==UserScript==
// @name         Remove ads and useless elements
// @version      1.0
// @description  Removes ads and useless elements from website
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var elements_to_remove = [
        'div.advertisement',
        'div.useless_element_1',
        'div.useless_element_2'
    ];
    elements_to_remove.forEach(function(selector) {
        var element = document.querySelector(selector);
        if(element) {
            element.remove();
        }
    });
})();

该脚本将删除名为“advertisement”、“useless_element_1”和“useless_element_2”的三个类中的所有元素。

2、自定义样式脚本

样式脚本可以用于更改网页的外观。例如，我们可以更改字体、颜色、大小等。以下是自定义样式脚本示例：

// ==UserScript==
// @name         Change font and color
// @version      1.0
// @description  Changes font and color of website
// @match        http://example.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle('body { font-family: Helvetica, Arial, sans-serif; color: #333333; }');
})();

该脚本将更改页面字体和颜色。

3、数据抓取脚本

数据抓取脚本可以用于从网站中采集数据，并在页面上显示它。例如，我们可以从一个网站上提取所有文章的标题，并将其以下拉列表的方式显示出来。以下是一个数据抓取脚本示例：

// ==UserScript==
// @name         Fetch and display titles
// @version      1.0
// @description  Fetch and display article titles from website
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var select = document.createElement('select');
    fetch('http://example.com/articles')
        .then(function(response) {
            return response.json();
        })
        .then(function(json) {
            json.articles.forEach(function(article) {
                var option = document.createElement('option');
                option.text = article.title;
                select.add(option);
            });
        });
    document.body.appendChild(select);
})();

该脚本通过fetch API从"http://example.com/articles" URL中提取JSON数据，然后将其中的文章标题显示在下拉列表中。

三、处理事件

使用Tampermonkey，可以添加事件监听器，例如在页面加载时或在滚动页面时触发某些操作。事件可以使用addEventListener()方法来添加。例如，以下是一个在页面首次加载时弹出消息框的脚本：

// ==UserScript==
// @name         Display greeting message
// @version      1.0
// @description  Displays greeting message when page is loaded
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.addEventListener('DOMContentLoaded', function() {
        alert('Welcome to Example.com!');
    });
})();

四、使用用户数据脚本

用户脚本可以访问浏览器内部的Storage API，可以用于在浏览器中存储用户数据。存储的数据可以用于在页面加载时还原用户设置。以下是一个以用户设置为例的脚本：

// ==UserScript==
// @name         Save user preference
// @version      1.0
// @description  Save user preference for website
// @match        http://example.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';
    var checkbox = document.querySelector('input[name=example_option]');
    checkbox.checked = GM_getValue('example_option', false);
    checkbox.addEventListener('change', function() {
        GM_setValue('example_option', checkbox.checked);
    });
})();

该脚本添加了一个复选框用于用户设置。它将读取之前储存复选框状态的值来初始化复选框，并在更改时将最新的状态值存储在Storage API中。

五、Tampermonkey的其他功能

除了以上列出的功能，Tampermonkey还提供了其他功能。例如，它可以用于防止网站窃取Cookie，可以用于监控页面加载并加载第三方脚本，以防止恶意代码的注入。

使用Tampermonkey，可以将许多自定义功能添加到您的浏览器中，以增强您的上网体验。作为一名熟练的开发人员，从事Tampermonkey编程可以让你更熟练地编写代码。

fetch

相关文章