简单的油猴脚本-本地开发教程

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。

虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。 它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能， 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。

基于以上便利性,这里介绍一下 Tampermonkey 中的简单插件开发功能.由于Tampermonkey 已经内置了一个编辑器,使得我们只要新建一个脚本就能够实现在其内置的编辑器中实现开发.但是对于我这种小白而言, 没有代码提示功能的开发简直能够要了我的老命,这里介绍另外一种本地开发功能,借助 Visual Studio Code 实现本地开发.

如上图所介绍的,我们只需要允许 Tampermonkey 插件访问文件网址即可实现本地 js 文件的访问了,然后再通过 @require 引入后,即可实现本地的插件开发了.这里详细介绍一下具体过程.

1. 安装 Tampermonkey 插件

由于 chrome 的某些原因, chrome 浏览器是无法直接访问 chrome 应用商店的,这里我们是用基于 chrome 内核的 Edge 浏览器来演示:

链接,在 Edge 浏览器中打开并点击获取完成安装.

2. 设置 Tampermonkey,使其允许访问文件网址

按照上述步骤打开 Tampermonkey 插件的详细信息

在详细信息中勾选允许访问文件URL

3. 创建本地文件工程

这里演示在 D:\demo作为工程的根目录,在根目录下新建一个 JavaScript 脚本,并命名为 demo01.js,此时这个文件的绝对路径为 D:\demo\demo01.js,对应的文件 URL 为 file:///D:\demo\demo01.js , 这里要留意一下,待会儿我们会用到这个 URL.

在 Visual Studio Code打开这个目录,并打开 demo01.js,编辑如下内容:

(function () {
    console.log("this hello comes from tampermonkey!")
})();

4. 在 Tampermonkey 中创建用户脚本

点击 Tampermonkey 图标,执行以下步骤

编辑相应的内容:

这里最重要的一点是在头部配置中增加一行,表示将从本地引入该文件.

// @require file:///D:\demo\demo01.js

在编辑完成后,使用快捷键 Ctrl + S 保存编辑内容.

5.运行执行脚本

到此为止,你已经完成了本地开发脚本所需要配置的全部内容,接下来就可以在你要开发的对应页面进行脚本的开发了,这里以百度为例,比如此时我们代开百度页面,然后打开控制台,就会看到我们刚刚开发的代码的运行结果:

总结

以上就是如何在本地实现 Tampermonkey 脚本的开发方式,适用于新手用作 JavaScript 代码的研究.对于我而言,这样的功能可以帮助我实现一些页面上的 JavaScript 脚本.希望能够帮到你.

参考资料

Tampermonkey 官网
Tampermonkey Edge 插件
tampermonkey 简单脚本开发
油猴脚本开发入门
简单的TAMPERMONKEY脚本编写教程
Tampermonkey文档(部分)
@match 标签的有效性描述