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

摘要

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

开篇寄语

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

前情提要

• 《一个浏览器脚本竟然可以免费访问成人网站或者网盘会员内容》
• 《UserScripts 可以在 iPhone/iPad/Mac 上使用 Tampermonkey/油猴脚本》
• 《这样操作，优化阿里云盘网页端体验——解锁视频播放时间限制/直链下载等等》
• 《利用一个浏览器脚本快速提升搜索效率》
• 《油猴插件安装B站解除地区限制脚本，不受地区限制播放》

前提准备

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

• 《想学习编程却不知从何处入手？看这篇或许就足够了》
• 《看教程加用此方法刷题能够快速掌握一门编程——我的经验》
• 《5步骤学会任何编程语言的方法论》

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

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

官方文档

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 脚本更加丰富多彩。

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

• “我“需要实现什么功能
• 要实现这个功能，拆解实现步骤
• 初次试写，遇到困难，排除，又遇到困难，再排除
• 撰写完成
• 测试
• 成功

可以参看其他优秀的 Tampermonkey 脚本，可以学习到很多哦，比如伯衡君之前介绍的这个网站：

• Greasyfork

本篇就到这里，是一篇相对适合入门的基础文章，想要深入还需自己发挥创造性啦。