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

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

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 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
混的人。

8

主题

124

帖子

162

积分

注册会员

Rank: 2

积分
162

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

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

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

因为element也要修改一部分代码
图方便就干脆vue跟着一起改了
但是gf发脚本少,没考虑这个问题
trycatch的问题我回头改下
混的人。
回复

使用道具 举报

81

主题

827

帖子

676

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
676

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

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

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

使用道具 举报

发表回复

本版积分规则

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