如何撰写一个 Tampermonkey 脚本/油猴脚本？这篇文章带你掌握

2022-04-2423:12:21 发表评论

摘要

说到浏览器上使用的扩展—— Tampermonkey（油猴）脚本管理，想必很多人都或多或少正在使用或者曾经使用过。什么？你还不知道这款浏览器扩展？那么就请参看下方前情提要，伯衡君曾经有过详细介绍，这里就不在这篇赘述了，本篇呢，主要是介绍一下该如何撰写一个 Tampermonkey 脚本，如果耐心看完，相信你很快就能掌握……

分享至：

开篇寄语

前情提要

前提准备

需要具备一定的 Javascript 这门编程语言的基础知识，本篇文章只是讲解如何撰写，举例也是非常简单的，想要写更为复杂的脚本，可以进行这门语言的学习，详情请看以下几篇文章，帮助你更快掌握 Javascript 这门编程语言。

有关加深记忆的学习方法，可以参看下面这篇文章：

《分享一下学习观念，提升获取知识速度，加深记忆》

官方文档

Tampermonkey 给出了官方文档，在文档中介绍及解释了涉及相关的语句概念：

Tampermonkey Documentation

建议想要更加深入了解，制作功能更加强大的脚本的话，还是要仔细读一读。

内容详情

创建 Tampermonkey 脚本，需要新建一个，安装完成 Tampermonkey 插件后，点击该插件图标，在弹出选项中点击新建。

之后在弹出页面就会出现如下场景。

其中的文本内容，分别来解释一下。

@name：脚本名称，也就是这个脚本可以自定义名称，这个脚本伯衡君暂时命名为 “Console Demo”
@namespace：官方解释为脚本的命名空间，可以写成自己想要的域名，比如“https://www.luckydesigner.space”
@version：版本号，这个自定义啦，一般每次小更新是“+0.1”，每次重大更新是“+1”
@description：描述该脚本能实现什么功能，或者介绍一些其他有的没的
@author：作者名称，自定义
@match：符合规则的目标网站，如果想要这个脚本对什么网站都起作用，只需要将“http://*/*”或者“https://*/*”填列在后面
@icon：官方文档给出的解释是低分辨率的脚本图标，就用默认的，如果有自己的图标，也可以用自定义的

于是，脚本内容就变成下面这个样子：

// ==UserScript==
// @name         Console Demo
// @namespace    https://www.luckydesigner.space
// @version      0.1
// @description  Showing Test
// @author       Zhangboheng
// @match        http://*/*
// @match        https://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=javbus.com
// ==/UserScript==

(function() {
    'use strict';

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

实现什么呢？来个最简单的，打开任意一个网站，都会弹出一个提示框，上面写着“123”，那么这个脚本内容就会变成下面这个样子：

// ==UserScript==
// @name         Console Demo
// @namespace    https://www.luckydesigner.space
// @version      0.1
// @description  Showing Test
// @author       Zhangboheng
// @match        http://*/*
// @match        https://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=javbus.com
// ==/UserScript==

(function() {
    'use strict';
    alert('123');
    // Your code here...
})();

按下“Ctrl + S”，保存该脚本，之后请将该脚本处于启动状态，如下图所示。

随后，打开任意一个网站，就会弹出提示框，上面写着“123”。

是不是很简单？

当你深入学习 Javascript 这门编程语言后，肯定会逐渐了解到一个名为 jQuery 的第三方库，它能够让你的 Javascript 更便捷，想要在 Tampermonkey 脚本中引用第三方库，只需要在脚本中增加一行“@require http://code.jquery.com/jquery-latest.js”，这样就可以使用 jQuery 语句了，完整代码如下：

// ==UserScript==
// @name         Console Demo
// @namespace    https://www.luckydesigner.space
// @version      0.1
// @description  Showing Test
// @author       Zhangboheng
// @match        http://*/*
// @match        https://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=javbus.com
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==

$(document).ready(function() {
  console.log('123');
});

通过这个方式，能够让你编写的 Tampermonkey 脚本更加丰富多彩。

编写一个成功的脚本，可以从下面几个方向思考：