引用方式的梗概
本章节主要目的是提供一些在开发过程中常见的库的引用说明
由于油猴所执行的环境与浏览器略有不同,除了专门用于油猴所编写的库,经常会一些库在发生引用后无效,或者出现错误等各种情况,这个时候我们通常有两种解决办法。
直接写入网页
创建一个 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 就是一个典型的例子:
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
这样,当油猴脚本加载的时候,会自动加载对应的库。
一些全局的库在引用后会直接挂载到全局变量上,如:jQuery
,axios
等。
但是脚本会提示 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
标签方式直接引入,
而如果需要魔改,则可以优先标签式引入。