[√]使用vscode开发油猴Tampermonkey脚本

1,431 阅读2分钟

油猴是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。虽然有些受支持的浏览器拥有原生的用户脚本支持,但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。 它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能, 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。

如何安装脚本

Tampermonkey

脚本分享网站: greasyfork

极速入门

1. 找到扩展,然后点击添加新脚本

image.png

油猴会自动打开一个脚本编辑页面 image.png

2. 修改脚本

// @match        http://*/

match字段是匹配网站的规则,这里只能匹配http类型的网站,我们知道现在还有https类型的网站,为了让在任何网站上都能运行我们写的脚本,同时能看到效果,我们简单修改下:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    alert("hello")// 弹出一个对话框
})();

3.将脚本保存到本地,并安装

image.png

打开使用工具,通过导入,将刚才保存的脚本安装上去

image.png

选择安装即可

image.png

安装成功之后,我们就能在已安装脚本里面看到

image.png

4.测试下效果

我们随便打开一个网址,发现已经能够正常运行我们的脚本了。

image.png

以上就是油猴脚本的极速入门教程,因为版本的差异,我看到网上很多教程都是缺少第3步,让我研究了很长时间,才发现如何入门,真的非常坑。

在vscode中开发脚本

入门之后,我们发现编写脚本非常的不方便,写js当然还是得vscode最舒服,但是我们发现要实时修改已经安装的油猴脚本,我们就需要频繁的安装脚本,非常的影响效率。

油猴脚本支持require,我们可以让已经安装的油猴脚本,通过require一个本地js脚本,然后我们使用vscode修改本地的js脚本即可。

大致流程如下:

1. 在chrome扩展程序里面找到安装的油猴,并打开允许访问文件网址权限。

image.png

2. 油猴插件安装dev.js这个脚本,然后我们实时修改index.js即可

image.png

开发

开发过程中还是需要经常翻阅文档