李恒道 发表于 2021-9-25 23:36:43

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

# 开题

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

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

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

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

# 引入Vue

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

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

如果我们

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

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

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

app.mount("#app");

的时候报错的

![图片.png](data/attachment/forum/202109/25/232138ow5a12v2ydzldvd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

那我们该如何解决呢？

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

![图片.png](data/attachment/forum/202109/25/232800nw7j1z9j6ouj77o8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

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

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

```javascript
(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](data/attachment/forum/202109/25/233405i8sekeek0wr0k60f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.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

cxxjackie 发表于 2021-9-26 00:10:25

这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧，应该没有必要去修改原文件，主要greasyfork对require审核比较严格，自己传一份总归不如引用现成的方便。另外判断unsafeWindow可以这样，不用try catch：const wd = window.unsafeWindow || document.defaultView || window;

李恒道 发表于 2021-9-26 09:11:56

cxxjackie 发表于 2021-9-26 00:10
这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧，应该没有必要去修改原文件，主要greasyfork对 ...

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

王一之 发表于 2021-9-26 09:17:39

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


好像可以转成这个，就没问题了
https://www.jsdelivr.com/

unity韩 发表于 2022-5-11 10:26:59

vue第二篇

李恒道 发表于 2023-6-23 21:35:57

cxxjackie 发表于 2021-9-26 00:10
这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧，应该没有必要去修改原文件，主要greasyfork对 ...
时隔多年再来看当时自己实在太浅薄了
当时c大硬是忍住了没说话
一定脾气很好

李恒道 发表于 2023-6-23 22:09:18

cxxjackie 发表于 2021-9-26 00:10
这个问题的话在脚本里加一句unsafeWindow.Vue = Vue就行了吧，应该没有必要去修改原文件，主要greasyfork对 ...
还有一个问题想请教c大
假如我使用
// @resource   ELEMENT_JShttps://unpkg.com/element-plus
然后evla这个js代码
应该是符合gf规则的吧...
我对规则方面不是特别清晰
查了一下gf感觉应该是符合的？

Hello Element Plus

cxxjackie 发表于 2023-6-23 23:02:05

李恒道 发表于 2023-6-23 22:09
还有一个问题想请教c大
假如我使用
// @resource   ELEMENT_JShttps://unpkg.com/element-plus


resource和require好像是一样的规定，只加载不执行没问题，执行了就要受域名限制，这是官方的说法：https://greasyfork.org/zh-CN/help/external-scripts
页: [1]
查看完整版本: [油猴脚本开发指南]修改Vue3代码兼容油猴