怎么写一个Tampermonkey(油猴)脚本

1. 为浏览器安装Tampermonkey扩展

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

其实国内的一些浏览器也支持安装此扩展，只是存在不是最新版本的可能性；因为访问Chrome应用商店对家庭宽带并非易事，所以我以支持度高的Firefox为例

2. 装配一个编写代码的编辑器

代码编辑器有很多，只要你有能力你甚至都不需要安装代码编辑器，完全可以在Tampermonkey脚本编辑器里面直接编写

我推荐的编辑器是VScode,这是微软一款开源产品，你可以进入VScode官网下载并安装,如果你碍于官网没有较好的下载体验你可以合理选择从第三方下载

安装完VScode我建议你再中文简体语言包(Chinese (Simplified) Language Pack for Visual Studio Code
)，这样你可以体验到更好的中文支持，当然这不是必须的

3. 学习基本的JavaScript语法

这一点只能靠自己去学习，如果你有不错的其他程序语言基础你很快就能掌握，至于相关资料你可以去菜鸟教程、W3School和MDN，相比前两者我个人更喜欢第一个，至于MDN我认为更为它专业而不太利于新学习者。当然你也可以选择纸质书籍，以及在线课程等等

4. 运行一个简单的脚本

尝试替换掉百度搜索的logo,下图左右为替换前后的效果

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com/*
// @grant        none
// ==/UserScript==

(function() {
   'use strict';
   var newlogo="http://img4.imgtn.bdimg.com/it/u=3653489744,480112400&fm=26&gp=0.jpg";//新的图片
   var LOGO = document.getElementsByClassName("index-logo-src")[0];
   console.log("======>替换前的："+LOGO.src);
   LOGO.src=newlogo;
   console.log("======>替换后的："+LOGO.src);
   })();

一个简单脚本的大致结构就是如此，当然也有更详细的说明文档比如：GreaseSpot

5. 少走弯路更便捷的调试

正常状态下，你测试一个新的脚本很有可能是将写好的脚本代码粘贴或导入到管理器中，我最初就按下了很多次的复制粘贴，考虑到这样操作的繁琐我找到了一个相对较好的方法，它来自于三十六变

1. 你先在管理器中添加一个下面这样的脚本

   // ==UserScript==
   // @name         New Userscript
   // @namespace    http://tampermonkey.net/
   // @version      0.1
   // @description  try to take over the world!
   // @author       You
   // @match        https://www.baidu.com/*
   // @require      file://D:\test\test.js   
   // @grant        none
   // ==/UserScript==
   

2. 然后在D盘目录下新建一个名为test文件夹,并新建一个名为test.js的内容为下面的脚本文件,打开百度搜索你会看到和第4步同样的效果

      (function() {
      'use strict';
      var newlogo="http://img4.imgtn.bdimg.com/it/u=3653489744,480112400&fm=26&gp=0.jpg";//新的图片
      var LOGO = document.getElementsByClassName("index-logo-src")[0];
      console.log("======>替换前的："+LOGO.src);
      LOGO.src=newlogo;
      console.log("======>替换后的："+LOGO.src);
      })();
   

3. 如此这样，会利用@require调用本地文件，你根据自己的需求更改合适的目录，你只需要要保存新的脚本并刷新网页就能看到新的脚本运行结果，当然你可以为VScode设置自动保存来取得更少的工作量

   打开VScode的设置页面，进行如下标注的改变，文件将会在每一个一秒后的间隔保存

   

6. 脚本的分享

脚本的分享网站也不止一个，比较易用的我认为是Greasyfork；你如果愿意你就可以将自己的脚本作品上传的这个网站,上传前你需要注册一个账号，登录自己的账号进入到自己的个人页面你就能看到提交脚本按钮,点击打开就可以上传脚本了