王一之 发表于 2021-1-28 16:49:08

[油猴脚本开发指南]外部资源引用

### 本节主要内容

> 引入外部资源,例如jQuery,vue,和自己写的一些css样式,js脚本等.最终写一个脚本给论坛增加一个黑夜模式(背景全是黑的).

### js资源的引用

有些时候可以引入一些js资源文件帮助我们更加方便的开发脚本,例如引入jQuery,vue等框架.当然还有其它更多的用法,例如脚本加上鉴权,脚本url后加一些token等等.

#### 使用@require加载

油猴给我们提供了一个[@require](https://www.tampermonkey.net/documentation.php#_require)属性给我们来引用用户脚本,并且油猴给我们提供了md5,sha256等校验方法来校验引用的脚本是否正确,例如下面这样:

```
// @require    https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js
```

如果md5不正确,console中则会显示下面的内容

!(data/attachment/forum/202101/28/164854lfii1l6zteit4oit.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image-20210128111926953.png")

如果是采用这种方式引入的话,那么引入的**js执行的上下文**是在油猴的环境中,可能会导致js无法正常执行,例如沙盒环境中操作前端window是需要使用 `grant unsafeWindow`,引入的js文件可能并不会考虑这些.一个小坑需要注意.

另外如果 `grant none`运行在非沙箱的情况下,js代码可能会与前端冲突(例如前端引入了一次jQuery,这里又require了一次jQuery),可以使用沙箱模式运行,这样只存在沙箱的上下文中,不会影响到前端,不过这种情况,可以直接使用前端的js,如果版本符合你的需求的话.

沙盒中的document的可以正常使用,所以可以引用vue,jquery之类的框架,但是如果js脚本涉及到window的操作,需要使用下面的方法.

#### 使用脚本加载

> 对于上面的小坑可以使用这种方法解决

在我们的脚本中写如下代码,原理就是往我们的页面中加入script标签去加载js文件.需要注意的是,head标签,body标签等不同的位置中插入,js加载的时间是不同的,不过一般onload之后再执行脚本一般没问题.(注意脚本的 `run-at`属性,最好是 `start`,总之就是js加载顺序和脚本执行顺序啦,别js还没加载完你脚本就开始用js了)

```
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js";
document.documentElement.appendChild(script);
```

### css资源的引用

> 可以使用css来改变我们页面的布局效果

#### 使用油猴来加载

> 本思路也可以用于其他资源的加载,例如图片,json,xml,更新公告信息等等.

油猴提供了一个[@resource](https://www.tampermonkey.net/documentation.php#_resource)的属性,也可以使用**md5进行校验**,让油猴将资源预加载好,然后可以通过(https://www.tampermonkey.net/documentation.php#GM_getResourceURL)和(https://www.tampermonkey.net/documentation.php#GM_getResourceText)获取资源url或者内容.

获取到css内容之后可以通过(https://www.tampermonkey.net/documentation.php#GM_addStyle)将css样式添加到前端页面.就像下面这样.

```
// @resource css https://blog.icodef.com/wp-content/themes/Kratos-3.0.7/assets/css/kratos.min.css?ver=3.2.4

console.log(GM_getResourceURL("css"),GM_getResourceText("css"));//url是一个base64的url
GM_addStyle(GM_getResourceText("css"));
```

#### 使用脚本加载

这种方法与上面的加载js一样,不再做过多描述,缺点就是没有预加载好资源,很明显的感觉到了刷新的样子.

```
let script = document.createElement('link');
script.setAttribute('rel', 'stylesheet');
script.setAttribute('type', 'text/css');
script.href = "https://blog.icodef.com/wp-content/themes/Kratos-3.0.7/assets/css/kratos.min.css?ver=3.2.4";
document.documentElement.appendChild(script);
```

### 给论坛添加黑夜模式

> 我们直接引入外部js就可以了啦~这里是一个dark mode的插件:(https://github.com/sandoche/Darkmode.js)

```
// ==UserScript==
// @name         论坛黑夜模式demo
// @namespace  http://tampermonkey.net/
// @version    0.1
// @description给网站添加一个黑夜模式
// @author       You
// @match      https://bbs.tampermonkey.net.cn/*
// @run-at       document-start
// @grant      unsafeWindow
// @require https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js
// ==/UserScript==

unsafeWindow.onload=function(){
   //因为这个脚本只操作document,所以在沙箱环境中也是没有问题的
   new Darkmode().showWidget();
}

```

rubinTime 发表于 2021-11-28 10:08:28

问问大佬，这个注释加@符号可以生效，是GM内部实现的吗

王一之 发表于 2021-11-28 11:33:32

rubinTime 发表于 2021-11-28 10:08
问问大佬，这个注释加@符号可以生效，是GM内部实现的吗

是的

myaijarvis 发表于 2022-1-13 23:01:57

在油猴脚本中加载layui，css文件路径不对，有没有大佬知道 https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1521&highlight=layui
在油猴脚本中载入cdn上的layui.js，里面会自动载入laydate.css、layer.css和code.css，但是这三个css资源的路径不对，是以当前网站域名来加载的，导致找不到这三个css文件，应该是从cdn的地址来加载才对啊，不知道怎么回事。

我也遇到了这样的问题，但在知乎(vue脚手架项目)上插入script会失败，原因是because it violates the following Content Security Policy directive: ...
我的办法是
// @resource css https://www.layuicdn.com/layui-v2.6.8/css/layui.css
// @grant      GM_getResourceText
// @grant      GM_addStyle

GM_addStyle(GM_getResourceText("css"));

但是调用layui.layer.msg('123')还是没有效果，原因是layer.css没有正确加载，因为layui.css里面没有layer.css，参考官网https://www.layuion.com/doc/base/infrastructure.html#config 上说是动态加载layui需要自己设置路径，但是我试了一下还是没有成功，你可以试试这个办法，行的话麻烦回来告诉我一声

wwwwwllllk 发表于 2022-12-8 22:56:26

myaijarvis 发表于 2022-1-13 23:01
在油猴脚本中加载layui，css文件路径不对，有没有大佬知道 https://bbs.tampermonkey.net.cn/forum.php?mod ...

使用脚手架写脚本应该就不会遇到这个问题了。
参考https://bbs.tampermonkey.net.cn/thread-3688-1-1.html

李恒道 发表于 2022-12-8 23:35:49

myaijarvis 发表于 2022-1-13 23:01
在油猴脚本中加载layui，css文件路径不对，有没有大佬知道 https://bbs.tampermonkey.net.cn/forum.php?mod ...

[油猴脚本开发指南]Layui库引入扩展模块路径解决方法
https://bbs.tampermonkey.net.cn/thread-1910-1-1.html

ray040237 发表于 2023-11-17 19:34:24

哥哥，ui库的font文件可以通过油猴添加进去吗？？

王一之 发表于 2023-11-18 14:25:50

ray040237 发表于 2023-11-17 19:34
哥哥，ui库的font文件可以通过油猴添加进去吗？？

这个不行，不过看ui库自己有没有处理这个，没有的话可能得自己插入元素添加了，这个不难的

https://blog.csdn.net/wxxmagic/article/details/112305960
页: [1]
查看完整版本: [油猴脚本开发指南]外部资源引用