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

百度已收录   阅读次数: 231
2022-04-2423:12:21 发表评论
摘要

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

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

开篇寄语

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

前情提要

前提准备

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

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

官方文档

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

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

内容详情

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

如何撰写一个 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”,保存该脚本,之后请将该脚本处于启动状态,如下图所示。

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

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

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

是不是很简单?

当你深入学习 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 脚本,可以学习到很多哦,比如伯衡君之前介绍的这个网站:

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

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: