上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    308

    主题

    4629

    回帖

    4381

    积分

    管理员

    积分
    4381

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2021-1-28 16:49:08 | 显示全部楼层 | 阅读模式

    本节主要内容

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

    js资源的引用

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

    使用@require加载

    油猴给我们提供了一个@require属性给我们来引用用户脚本,并且油猴给我们提供了md5,sha256等校验方法来校验引用的脚本是否正确,例如下面这样:

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

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

    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的属性,也可以使用md5进行校验,让油猴将资源预加载好,然后可以通过GM_getResourceURLGM_getResourceText获取资源url或者内容.

    获取到css内容之后可以通过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的插件: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();
    }
    
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    22

    主题

    104

    回帖

    170

    积分

    中级工程师

    积分
    170
    发表于 2021-11-28 10:08:28 | 显示全部楼层
    问问大佬,这个注释加@符号可以生效,是GM内部实现的吗
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    308

    主题

    4629

    回帖

    4381

    积分

    管理员

    积分
    4381

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2021-11-28 11:33:32 | 显示全部楼层
    rubinTime 发表于 2021-11-28 10:08
    问问大佬,这个注释加@符号可以生效,是GM内部实现的吗

    是的
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-12-27 16:10