油猴脚本快速入门带简易案例

油猴脚本快速入门带简易案例

很简短。。

通过本文，你将学会

1. 如何编写、发布油猴脚本
2. 了解油猴脚本提供的封装好的浏览器插件API

油猴脚本入门

油猴脚本头部的注释信息很重要，他除了声明该脚本的基本信息之外，还标注了该脚本可在哪些指定的页面上运行，声明将要引入的外部文件、脚本运行时机，如果要调用油猴提供的API(GM_xxx)或者向指定域名发起请求也需要在头部注释段进行声明。

重要声明字段

@match | @include

两者几乎类似，声明脚本该运行的页面，可声明多次。但不支持URL hash参数

// @include http://www.tampermonkey.net/*
// @match   *://link.csdn.net/?target=*
// @match   /^https?:\/\/(www)?\.?(juejin|zhihu)\.(com|cn)/          使用正则匹配知乎或掘金
// 其他匹配模式可参考：https://developer.chrome.com/docs/extensions/mv3/match_patterns/

@require

在脚本运行前载入且执行的的JavaScript文件

// @require https://code.jquery.com/jquery-2.1.4.min.js
// @require https://code.jquery.com/jquery-2.1.3.min.js#sha256=23456...
// @require https://code.jquery.com/jquery-2.1.2.min.js#md5=34567...,sha256=6789...
// @require tampermonkey://vendor/jquery.js
// @require tampermonkey://vendor/jszip/jszip.js

@resource

通过GM_getResourceURL and GM_getResourceText预加载可访问的资源

// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @resource icon1 http://www.tampermonkey.net/favicon.ico
// @grant        GM_addStyle
// @grant        GM_getResourceText
.......
   // 代码内部    引入bootstrap的css文件并加入html中
   const css = GM_getResourceText("customCSS");
   GM_addStyle(css);

@connect

定义可以被GM_xmlhttpRequest访问的网站(domains)(包含子网站)。要调用一些API接口，就得在这提前声明。

// @connect *
// @connect *://*.test.com/

@grant

声明将会用到的GM_* API

API列表：https://www.tampermonkey.net/documentation.php#unsafeWindow

@run-at

声明脚本运行时机，只能声明一次

// @run-at document-start  	以最快速度注入脚本
// @run-at document-body	当body元素存在时(body挂载时)
// @run-at document-end		在`DOMContentLoaded`时/后(when or afte)
// @run-at document-idle	在`DOMContentLoaded`后（default）
// @run-at context-menu 	点击了右键菜单

GM_XXX API

有点多，大概就是添加样式、持久化存储、添加、移除监听、获取获取 @resource 中声明的资源、操作tab/xhr发起请求、发起桌面通知、

案例- 自动跳过网站的外链提示

// ==UserScript==
// @name         自动跳过网站的外链提示
// @namespace    http://tampermonkey.net/undefined
// @version      0.2
// @description  一个很简单的小脚本，用于自动跳转知乎、掘金、简书等打开外链的跳转/离开提示(不算是外链直达)，这样写简单又通用。\n另外可以用外链直达方式，那就是替换页面中的跳转链接为真实链接或者接管a标签的点击事件
// @author       禾几元
// @match        *://link.zhihu.com/?target=*
// @match        *://link.juejin.cn/?target=*
// @match        *://www.jianshu.com/go-wild?ac=2&url=*
// @match        *://c.pc.qq.com/middlem.html?pfurl=*
// @match        *://gitee.com/link?target=*
// @match        *://link.csdn.net/?target=*

// @run-at       document-start

// ==/UserScript==

// 各大网站跳转页面中url的跳转参数名
const siteJumpParamMap = new Map([
  ['zhihu','target'],
  ['csdn','target'],
  ['juejin','target'],
  ['gitee','target'],
  ['jianshu','url'],
  ['qq','pfurl'],
]);

// 获取网站名称 @example: getSiteName('www.baidu.com'); // 'baidu'
const getSiteName = hostname => hostname.match(/([^\.]+)\.[^\.]+$/)[1];

(function() {
    'use strict';
    // 清空页面原有内容，防闪烁(非必须)
    window.document.documentElement.innerHTML=''
    // 获取URL中的请求参数
    const params = new URLSearchParams(location.search.substring(1));
    // 获取网站名称，用于查找对应的跳转参数名
    const siteName = getSiteName(location.hostname);
    // 获取该网站的的跳转URL的参数名，进而获取目标URL
    const targetURL = params.get(siteJumpParamMap.get(siteName));
    // 利用replace()方法进行跳转,保证无用的跳转页面不会产生在历史记录中
    location.replace(targetURL);
})();

发布脚本到Greasy Fork

1. 登陆 https://greasyfork.org/zh-CN 可用github账号快速登陆
2. 进入用户界面-控制台-点击发布你编写的脚本
3. 好了...