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

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

如何安装脚本

Tampermonkey

脚本分享网站： greasyfork

极速入门

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

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

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.将脚本保存到本地，并安装

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

选择安装即可

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

4.测试下效果

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

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

在vscode中开发脚本

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

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

大致流程如下：

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

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

开发

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