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

[油猴脚本开发指南]修改Vue3代码兼容油猴

[复制链接]
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 2021-9-25 23:36:43 | 显示全部楼层 | 阅读模式

    开题

    这篇我也不知道算不算做有意义的文章,目前认为算作一个课外篇吧

    因为这个方法网上目前没有任何搜索结果!

    我也是根据一些东西大概推测并且运行成功。

    可能结论以及过程不是那么精准,大家看个乐呵就行。

    引入Vue

    Vue分为两个版本,Vue2以及Vue3

    Vue2在油猴的引入是没有任何问题的,但是Vue3却出现了一些小问题。

    如果我们

    // @require https://unpkg.com/vue@next

    后进行测试,会发现报出错误

    经过debugger打电话调试,发现在

    app.mount("#app");

    的时候报错的

    图片.png

    那我们该如何解决呢?

    首先我们进地址观察一下Vue源码https://unpkg.com/vue@3.2.18/dist/vue.global.js

    图片.png

    这里可以发现var Vue=一个自执行函数的返回结果。

    自执行函数就是运行到这个函数上会开始自动调用函数,并且返回结果例如

    (function aaa(a,b){
        return sum = a + b
    ;})(1,2)

    也就是说这里var Vue就是函数的返回结果

    那我们冷静思考一下,到底我们在网页中与在油猴脚本中有什么不懂?

    这里我直接揭晓答案了,作用域!

    如果在直接在网页中插入script标签加载,var Vue属于全局作用域,可以在window下被找到

    而在油猴代码的执行过程中,无论none还是unsafewindow哪种情况,其执行过程都是

    function xxx(a,b,c,d){

    // require引入的代码

    // UserScript声明头部分

    // 脚本代码

    }

    也就是说这个var Vue的作用域并不在全局作用域了,那我们可以尝试挂载到window下试一下?

    说干就干!

    因为可能存在none和unsafe两种情况

    let WinVue=null
    try{
    WinVue=unsafeWindow
    }catch(err)
    {
    WinVue=window

    所以我这里做了个一个判断,如果unsafe复制出现异常了,就应该是none模式,获取window赋值给WinVue,如果没有触发异常,就是unsafeWindow模式,把unsafeWindow也就是网页的window赋值给WinVue。

    接下来我们修改var Vue为WinVue.Vue

    再进行测试。

    可以发现Vue3已经正常运行并且不再报错了

    图片.png

    我将修改后的代码已经发到了github上。可以直接require即可使用

    https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/vue.js

    代码可以参考

    https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1034

    图片.png
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    12

    主题

    390

    帖子

    578

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    578

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章荣誉开发者

    发表于 2021-9-26 00:10:25 | 显示全部楼层
    这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧,应该没有必要去修改原文件,主要greasyfork对require审核比较严格,自己传一份总归不如引用现成的方便。另外判断unsafeWindow可以这样,不用try catch:
    1. const wd = window.unsafeWindow || document.defaultView || window;
    复制代码
    回复

    使用道具 举报

  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 2021-9-26 09:11:56 | 显示全部楼层
    cxxjackie 发表于 2021-9-26 00:10
    这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧,应该没有必要去修改原文件,主要greasyfork对 ...

    因为element也要修改一部分代码
    图方便就干脆vue跟着一起改了
    但是gf发脚本少,没考虑这个问题
    trycatch的问题我回头改下
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    7 小时前
  • 签到天数: 64 天

    [LV.6]常住居民II

    150

    主题

    1976

    帖子

    2119

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2119

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2021-9-26 09:17:39 | 显示全部楼层
    李恒道 发表于 2021-9-26 09:11
    因为element也要修改一部分代码
    图方便就干脆vue跟着一起改了
    但是gf发脚本少,没考虑这个问题

    好像可以转成这个,就没问题了
    https://www.jsdelivr.com/
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    3

    主题

    40

    帖子

    33

    积分

    助理工程师

    Rank: 1

    积分
    33

    新人报道三好学生国庆纪念章中秋纪念章猫咪币纪念章热心会员

    发表于 2022-5-11 10:26:59 | 显示全部楼层
    vue第二篇
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表