什么是油猴脚本

  • TamperMonkey，其实中文名是“捣蛋猴”，但是大家都习惯称其为“油猴”，是一款免费的浏览器扩展插件，也是最流行的用户脚本管理器。
  • 它适用于 Chrome、Microsoft Edge、Safari、Opera Next 和 Firefox 等浏览器，油猴脚本生态丰富。
  • 它提供了便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能，还可以实现视频解析、音乐下载、网盘直连解析、豆瓣资源下载、百度文库增强、屏蔽网站广告等功能。

油猴脚本实现网站自动登录（chrome）

安装
安装方法有两种：

  1. chrome网上应用商店
    安装地址直达：链接直达
  2. 使用离线包安装
    离线包地址：链接直达，然后进入基于Chromium内核浏览器的“扩展程序”页面，开启“开发者模式”，最后将离线安装包拖进“扩展程序”页面，按照提示安装即可
    安装完成后浏览器会出现一个小图标，表示已经安装成功了，如图

油猴脚本 - 图1

实现天眼监控自动登录

点击小图标，会出现下拉，选择添加新脚本，就会出来一个代码编写的页面

油猴脚本 - 图2

油猴脚本 - 图3
这个页面有一些功能注释可以了解一下，它们表明了脚本的各个属性：

属性名 作用介绍
name 脚本的名字
namespace 命名空间，如果name相同的时候可以做区分，一般就是作者名字或者是网址
match 能匹配上的网址，脚本才能生效
grant 指定脚本运行所需权限，如果脚本拥有相应的权限，就可以调用油猴扩展提供的API与浏览器进行交互。如果设置为none的话，则不使用沙箱环境，脚本会直接运行在网页的环境中，这时候无法使用大部分油猴扩展的API。如果不指定的话，油猴会默认添加几个最常用的API
require 如果脚本依赖其他js库的话，可以使用require指令，在运行脚本之前先加载其他库，常见用法是加载jquery
@run-at document-start // 尽可能早的插入
document-body // 当body这个标签有的时候插入
document-end // 当DOMContentLoaded事件中后插入
document-idle // 当DOMContentLoaded事件完成后插入（默认值）
context-menu // 如果在浏览器上下文菜单(仅基于桌面chrome浏览器)单击该脚本，它将被注入

了解大致的功能注释后，就可以进行代码编写了
天眼自动登录代码如下：

  1. // ==UserScript==
  2. // @name         xxx
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  帮我自动登录系统
  6. // @author       xxx
  7. // @match        http://xxx/login
  8. // @icon         https://www.google.com/s2/favicons?domain=xxx
  9. // @grant        none
  10. // ==/UserScript==
  12. (function() {
  13.     'use strict';
  14.     let inputs = document.querySelectorAll('input');
  15.     inputs[0].value = 'xxxx';
  16.     inputs[1].value = 'xxx';
  17.     const event = new Event('input');
  18.     inputs[0].dispatchEvent(event);
  19.     inputs[1].dispatchEvent(event);
  20.     document.querySelector('.button').click();
  21. })();

油猴脚本 - 图4
我们在编写插入脚本的时候，需要注意加载的时机、还有技术栈相关的赋值方法等

  1. 加载时机：脚本插入后可能会出现获取不到dom的情况，从而导致浏览器报错；比如我们react网站，最后解决方案是通过require一个js，从而延迟dom获取的时机，或者是直接设置setTimeout
  2. vue等单页应用框架的input赋值方式不同；比如我们的vue网站，使用vue框架做登录功能，如果单纯使用input.value赋值，你会发现每一次脚本加载后都会被form校验拦截而导致无法正常请求登录接口；

文档参考

比较流行的油猴脚本

https://zhuanlan.zhihu.com/p/68617837

油猴脚本下载地

https://greasyfork.org/zh-CN

写法参考文档：

https://www.tampermonkey.net/documentation.php
https://segmentfault.com/a/1190000021654926