Tampermonkey指南

275 阅读3分钟

Tampermonkey指南

入门教程:hibbard.eu/tampermonke…hibbard.eu/tampermonke…simply-how.com/enhance-and…

官网:Home | Tampermonkey

前言:用户脚本是一组 JavaScript 代码和元数据,在网页加载时执行:代码是告诉浏览器如何修改页面的一系列指令;元数据是关于用户脚本的信息,例如:用户脚本应运行的网页、所需的资源和库等。要添加、更新和管理用户脚本,必须安装用户脚本管理器,从技术上讲,用户脚本只是一个以 .user.js​ 结尾的文本文件。这使得用户脚本管理器可以在浏览器中打开文件时检测并安装用户脚本。Tampermonkey 最适合基于Chromium 的浏览器,如 Google Chrome 和 Opera。

  1. 工作原理:Tampermonkey 本身并不直接执行任务,是用户脚本的管理器和推动者,在加载网页时将用户脚本(一小段 JavaScript 代码)注入网页中,这意味着可以更改几乎任何网站的外观、感觉和功能。

  2. 执行触发:用户脚本可以设计为运行:

    • 页面加载后立即: 网站完全加载后立即运行,立即进行更改。
    • 基于特定事件: 脚本可以对单击按钮、将鼠标悬停在元素上或计时器关闭等事件做出反应。
  3. 脚本的作用:用户脚本可以通过 DOM(文档对象模型)访问并修改网页的底层 HTML、CSS 和 JavaScript。这允许脚本:

    • 更改网站的外观(颜色、字体、布局)

    • 添加或删除页面上的元素。

    • 与表单交互,自动填写。

    • 使用 Web 请求与其他 Web 服务进行通信

使用方法:

  1. 去插件商店安装插件,安装后点击这个插件的按钮,选择“create a new script”

  2. 进入后会发现一个代码框,这个框就是写代码的地方,tempermonkey是个脚本管理器,即简化脚本作用于浏览器的路径,所以需要进行一些简单的配置

  3. // ==UserScript==
    // @name Open CodeProject Links
    // @namespace http://hibbard.eu/
    // @version 0.1
    // @description  Opens links from the CodeProject newsletter
    // @author       You
    // @match http://www.codeproject.com/script/Mailouts/*
    // @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
    // @grant        none
    // ==/UserScript==
    
  4. 解析:

    1. @name: 定义脚本的名称。在这种情况下,它是“打开 CodeProject 链接”。
    2. @namespace: 提供一个命名空间 URL 以唯一标识脚本。虽然它不必指向一个真实的 URL,但它用于区分具有相同名称的脚本。在这里,它设置为 hibbard.eu/
    3. @version: 指定脚本的版本。目前是 0.1 。
    4. @description: 提供脚本功能的简要描述。对于此脚本,它“打开来自 CodeProject 通讯的链接”。
    5. @author 指令用于指定脚本的作者。该字段可以包括作者姓名、用户名或创建者选择使用的任何标识符。
    6. @match: 确定脚本将在哪些 URL 上运行。在这里,它配置为在 www.codeproject.com/script/Mail…* 下的页面上运行。星号( * )充当通配符,意味着此脚本将在该路径下的任何子页面上运行。
    7. @icon:该指令指定了用户脚本的图标。该图标将显示在 Tampermonkey 面板中,也可能显示在列出脚本的浏览器用户界面中。
    8. @grant 指令用于声明脚本运行所需的特殊权限或 API。当设置为 none 时,它会明确告诉脚本管理器(如 Tampermonkey),脚本不使用 Greasemonkey 或 Tampermonkey 提供的任何特殊 GM_* 函数或 API(如用于跨域请求的 GM_xmlhttpRequest、用于添加 CSS 的 GM_addStyle,等等)。这意味着该脚本的运行安全和权限限制与网页中运行的普通 JavaScript 相同。除了网页本身的功能外,脚本不需要任何提升的权限或特殊的浏览器功能。
  5. 开始编写脚本,需要HTML,CSS,js基础