tampermonkey怎么用js

Tampermonkey 是一款流行的用户脚本管理器，允许用户通过JavaScript自定义网页的行为和外观。通过Tampermonkey，你可以增强网页功能、自动化重复任务、屏蔽广告、定制网页外观等。本文将详细介绍如何使用Tampermonkey编写和管理JavaScript脚本。

一、安装和初始设置

1、安装Tampermonkey

首先，你需要安装Tampermonkey扩展。Tampermonkey支持多种浏览器，包括Chrome、Firefox、Safari等。可以直接在浏览器的扩展商店搜索“Tampermonkey”并安装。

2、创建新脚本

安装完成后，点击浏览器工具栏上的Tampermonkey图标，选择“创建新脚本”。这将打开一个带有模板的编辑器，你可以在里面编写自己的JavaScript代码。

二、脚本基本结构

1、元数据块

每个Tampermonkey脚本都包含一个元数据块，用来描述脚本的信息。这些信息包括脚本名称、版本、作者、适用的网站等。以下是一个示例：

// ==UserScript==
// @name         Example Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*.example.com/*
// @grant        none
// ==/UserScript==

2、脚本主体

在元数据块之后，你可以编写自己的JavaScript代码。以下是一个简单的例子，该脚本将在example.com网站上弹出一个提示框：

// ==UserScript==
// @name         Example Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*.example.com/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // Your code here...
    alert('Hello, world!');
})();

三、常用功能

1、选择DOM元素

Tampermonkey脚本通常需要操作网页上的DOM元素。你可以使用原生的JavaScript方法，如document.querySelector和document.querySelectorAll，或者使用jQuery库。

// 使用原生JavaScript选择元素
let element = document.querySelector('div.some-class');
// 使用jQuery选择元素
// 需要在元数据块中添加 @require https://code.jquery.com/jquery-3.6.0.min.js
$(document).ready(function() {
    $('div.some-class').text('Hello, world!');
});

2、事件监听

你可以为网页上的元素添加事件监听器，以便在用户交互时执行特定的代码。

document.querySelector('button.some-button').addEventListener('click', function() {
    alert('Button clicked!');
});

3、存储数据

Tampermonkey提供了GM_setValue和GM_getValue两个API，用于存储和获取数据。这些数据在脚本更新或浏览器重启后仍然存在。

// 存储数据
GM_setValue('key', 'value');
// 获取数据
let value = GM_getValue('key');
console.log(value);

四、实战案例

1、自动填写表单

假设你经常在某个网站上填写相同的信息，可以编写一个Tampermonkey脚本自动填写表单。

// ==UserScript==
// @name         Auto Fill Form
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically fill out the form
// @author       You
// @match        http://*.example.com/form
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    document.querySelector('#name').value = 'John Doe';
    document.querySelector('#email').value = 'johndoe@example.com';
})();

2、屏蔽广告

你可以编写一个脚本屏蔽某些网页上的广告。例如，假设某个网站上的广告元素都有一个名为ad的类名，可以使用以下脚本将其隐藏。

// ==UserScript==
// @name         Hide Ads
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hide ads on example.com
// @author       You
// @match        http://*.example.com/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    let ads = document.querySelectorAll('.ad');
    ads.forEach(ad => ad.style.display = 'none');
})();

五、调试与优化

1、调试脚本

在编写脚本时，可能会遇到错误或意想不到的行为。你可以使用浏览器的开发者工具进行调试。通过console.log输出调试信息，或使用断点逐步执行代码。

console.log('Debug info:', someVariable);

2、优化脚本

为了确保脚本的性能，可以采取一些优化措施。例如，避免频繁操作DOM，尽量减少全局变量的使用，使用节流和防抖技术控制函数的执行频率等。

// 节流函数
function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}
// 防抖函数
function debounce(func, delay) {
    let inDebounce;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => func.apply(context, args), delay);
    };
}

六、与其他工具集成

1、与项目管理系统的集成

在团队开发中，使用项目管理系统可以提高效率。例如，研发项目管理系统PingCode和通用项目协作软件Worktile都是很好的选择。通过这些系统，你可以跟踪脚本的开发进度、分配任务、管理代码版本等。

2、脚本共享和版本控制

Tampermonkey脚本可以与GitHub等代码托管平台集成，实现版本控制和团队协作。将脚本上传到GitHub，并在Tampermonkey中使用@updateURL和@downloadURL元数据字段设置自动更新。

// ==UserScript==
// @name         Example Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*.example.com/*
// @grant        none
// @updateURL    https://github.com/yourusername/yourscript/raw/main/script.meta.js
// @downloadURL  https://github.com/yourusername/yourscript/raw/main/script.user.js
// ==/UserScript==

七、安全和隐私

1、脚本权限管理

在编写脚本时，应该谨慎授予权限。Tampermonkey的@grant字段可以用来指定脚本所需的权限。尽量使用最低权限，以减少安全风险。

// 需要访问GM_setValue和GM_getValue权限 // @grant GM_setValue // @grant GM_getValue

2、处理敏感信息

在脚本中处理敏感信息时，应注意加密和安全存储。避免将敏感信息硬编码在脚本中，使用加密算法保护数据。

// 示例：使用Base64编码敏感信息
let sensitiveData = btoa('secret information');
console.log(atob(sensitiveData));

八、结论

Tampermonkey是一款功能强大的用户脚本管理器，通过编写JavaScript脚本，你可以定制和增强网页的功能。在使用Tampermonkey时，需注意脚本的性能优化、安全和隐私保护，以及与团队协作工具的集成。希望本文能帮助你更好地理解和使用Tampermonkey，发挥其最大潜力。