跳到主要内容

引用方式的梗概

本章节主要目的是提供一些在开发过程中常见的库的引用说明

由于油猴所执行的环境与浏览器略有不同,除了专门用于油猴所编写的库,经常会一些库在发生引用后无效,或者出现错误等各种情况,这个时候我们通常有两种解决办法。

直接写入网页

创建一个 script 标签,直接将 JS 代码写入到网页中,如:

const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = "https://cdn.jsdelivr.net/npm/xxx";
document.documentElement.appendChild(script);

这个时候等待网页加载完毕直接读取网页上的对应变量即可

提示

这种方式通常是最简单的方式,

但是有一些网站会对这种方式通过CSP进行限制,如:声明禁止引入外部库

github 就是一个典型的例子:

ERROR

Refused to load the script 'https://cdn.jsdelivr.net/npm/xxx' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

使用油猴自带的外部脚本标签

@require 标签

@require 标签是油猴自带的标签,可以直接引入外部库,如:

// ==UserScript==
// @name test
// @namespace http://tampermonkey.net/
// @require https://cdn.jsdelivr.net/npm/xxx

这样,当油猴脚本加载的时候,会自动加载对应的库。

提示

一些全局的库在引用后会直接挂载到全局变量上,如:jQueryaxios 等。

但是脚本会提示 xxx 变量未定义,这个时候可以在脚本中添加 /*global xxx*/ 注释,以屏蔽规则。

ajaxHooker 为例:

// ==UserScript==
// ...
// @require https://scriptcat.org/lib/637/1.3.3/ajaxHooker.js
// ...
// ==/UserScript==

/*global ajaxHooker*/

更多使用说明,参考 @require 的官方文档

@resource 标签

@resource 标签也是油猴自带的标签,可以将外部库保存成资源,可以在代码中调用读取内容。

如:

// ==UserScript==
// @name test
// @namespace http://tampermonkey.net/
// @resource my_js https://cdn.jsdelivr.net/npm/xxx
// @grant GM_getResourceText
// @grant GM_getResourceURL
// ==/UserScript==

const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
// 读取资源内容,直接写入到网页中
script.src = GM_getResourceURL("my_js");
document.documentElement.appendChild(script);

更多使用说明,参考 @resource 的官方文档,资源内容获取的方法参考 GM_getResourceText(name)GM_getResourceURL(name)

对库进行修改

这个时候需要有一定的基本功,对库的代码进行调试、修改,使其兼容油猴环境。

如果你暂时不理解这部分是不要紧的,后续我们将会以各种库为例子进行调试和修改作为演示。

注意

需要注意的一个问题是:

不同的网站的审核标准不同,但是也有一些审核规则是相同的,例如:禁止外部引入,只供自己网站使用的库

换句话说即使你魔改成功,也不能上架在任何脚本平台上。

但是你通常可以上传到脚本平台相关的依赖库板块中,然后引用库

如果脚本平台所对应的组织有维护库列表的话,也可以提供库的修改方式,源代码以及完成品。

使其组织可以合并到他们的维护库列表中,为开源社区提供自己的一份力量!

例如在我们的 ScriptCat 脚本站 平台上,有很多大佬提供了一些脚本管理器上专用的、可以开箱即用的库,你可以快速使用。

当然,GreasyFork 也有类似的用户库,但是 GreasyFork 的用户库并不支持搜索功能。

关于推荐哪种方式

在不需要魔改库的情况下首要推荐 @require 标签方式直接引入,

而如果需要魔改,则可以优先标签式引入。