[油猴脚本开发指南]基本油猴编程的一些常见误区(二)

李恒道 · 发表于 2021-12-29 10:08:28

前言

本文总结了目前来说大家依然常常犯错或者常见的问题，很多问题已经可以称的上老生常谈了，唉

找不到元素怎么办？

可以参考https://bbs.tampermonkey.net.cn/thread-835-1-1.html的找不到元素

可能存在延迟加载元素，或者iframe作用域的问题

我们可以使用

var time=setInterval(()=>{xxxx},1000)

然后在适当的时候使用

clearInterval(time)

清除掉定时器

也可以使用addeventlistener或者mutationobserve

这两个api都在之前有所涉猎

addeventlistener适用于你需要同步进行，而mutationobser适用于异步，性能更好不卡顿

addeventlistener的则较为简单，基本分散在每节课了，所以没什么特别推荐的文章

简单的函数参数作用可以参考

[油猴脚本开发指南]addEventListener劫持

https://bbs.tampermonkey.net.cn/thread-967-1-1.html

关于Mutationobserve可以去参考以下文章

[油猴脚本开发指南]MutationObserver的使用

https://bbs.tampermonkey.net.cn/thread-988-1-1.html

[油猴脚本开发指南]Mutation Event性能影响简易测试

https://bbs.tampermonkey.net.cn/thread-1006-1-1.html

[油猴脚本开发指南]MutationObserver简单详解

https://bbs.tampermonkey.net.cn/thread-1007-1-1.html

[油猴脚本开发指南]MutationObserver简易例子

https://bbs.tampermonkey.net.cn/thread-1008-1-1.html

[油猴脚本开发指南]MutationObserver实战

https://bbs.tampermonkey.net.cn/thread-1017-1-1.html

我设置了元素但是点击登录依然没有用

这时候多半是框架的问题

我们虽然设置了内容但是没有做元素相关的校验

这时候需要对其进行特殊的处理

具体可以去参考
[油猴脚本开发指南]元素规则校验和检测的触发

https://bbs.tampermonkey.net.cn/thread-1250-1-1.html

我该如何判断网页到底是什么库？

通常打印window下的一些特有属性即可

比如确定是否为vue页面

尝试打印是否存在window.VUE_DEVTOOLS_TOAST 属性，如果存在通常为vue页面

但是我最近找到一个比较好用的插件Wappalyzer

可以直接查看当前页面是什么框架

图片.png

大家也可以安装上插件，根据提示的框架来对其进行针对性处理

但是也不是万能的，根据测试有一部分网站找不到任何信息。

我该如何处理React和Vue页面

React的教程在元素规则校验和检测的触发已经讲过了

而vue的相关教程可以去查看

https://bbs.tampermonkey.net.cn/thread-1425-1-1.html

https://bbs.tampermonkey.net.cn/thread-1438-1-1.html

Require后出现各种问题怎么办

require代码类似于

function(){

require的代码

你的代码

}

可能作用域和代码再次引用外部的库和数据，会出现各种各样的问题

这个时候可以考虑对网页插入script标签等进行引用

或者修改js代码，然后发布到npm来进行引用

具体可以参考

3个修改js库的例子

[油猴脚本开发指南]修改Vue3代码兼容油猴
https://bbs.tampermonkey.net.cn/thread-1035-1-1.html

[油猴脚本开发指南]魔改Element plus
https://bbs.tampermonkey.net.cn/thread-1039-1-1.html

[油猴脚本开发指南]魔改toastr
https://bbs.tampermonkey.net.cn/thread-1084-1-1.html

[油猴脚本开发指南]with解决require引入问题
https://bbs.tampermonkey.net.cn/thread-1146-1-1.html

npm发布魔改包

https://bbs.tampermonkey.net.cn/thread-1123-1-1.html

关于一些推荐的库

我们可以使用一些库来让我们的界面变的更好看

同时代码量更少

JS压缩解压库

[油猴脚本开发指南]JSZIP库压缩解压文件

[https://bbs.tampermonkey.net.cn/thread-1150-1-1.html]

[油猴脚本开发指南]JSZIP库实战

[https://bbs.tampermonkey.net.cn/thread-1198-1-1.html

漂亮的SweetAlert2对话框

[油猴脚本开发指南]SweetAlert2的漂亮对话框

[https://bbs.tampermonkey.net.cn/thread-1203-1-1.html]

[油猴脚本开发指南]SweetAlert2进阶

[https://bbs.tampermonkey.net.cn/thread-1303-1-1.html]

FileSaver前端提示下载数据

[油猴脚本开发指南]filesaver解决前端下载

[https://bbs.tampermonkey.net.cn/thread-1147-1-1.html]

结语

那基本这节总结了一些常见的错误以及问题

希望大家不要再重蹈覆辙了

cxxjackie · 发表于 2021-12-29 11:50:30

好！学习了，道哥牛逼！

李恒道 · 发表于 2021-12-29 11:59:35

cxxjackie 发表于 2021-12-29 11:50
好！学习了，道哥牛逼！

明明大部分都是根据你写出来的！

李恒道 · 发表于 2022-1-4 22:40:53

cxxjackie 发表于 2021-12-29 11:50
好！学习了，道哥牛逼！

大佬...
又碰到不会的东西了
https://creator.guanghe.taobao.com/#/pub/video
输入正文那里
我看好像是React+Ant-design
但是完全找不到数据的设置点
想做到设置数据到那个富文本编辑器以及读取数据

请求哆唻C梦指点迷津

cxxjackie · 发表于 2022-1-5 11:30:51

李恒道发表于 2022-1-4 22:40
大佬...
又碰到不会的东西了
https://creator.guanghe.taobao.com/#/pub/video

这个富文本框他的value是一个对象，结构比较复杂，我调试的时候找到了对象和文本互转的模块，问题是这个模块貌似没有全局访问的入口，是通过webpack加载的，我找了半天也没找到注入点，没办法只能劫持一下webpack：

// ==UserScript==
// @name TaobaoTest
// @description ...
// @namespace Sency
// @author Sency
// @version 1.0
// @match https://market.m.taobao.com/app/ali-content-platform/content-publish/index.html*
// @run-at document-start
// ==/UserScript==
(async function() {
'use strict';
function getExports(id) {
const _call = Function.prototype.call;
return new Promise(resolve => {
Function.prototype.call = function() {
const result = _call.apply(this, arguments);
if (arguments.length === 4 && arguments[1] && arguments[1].exports && arguments[0] === arguments[2]) {
for (let key in arguments[1]) {
if (key !== 'exports' && arguments[1][key] === id) {
resolve(arguments[1].exports);
Function.prototype.call = _call;
break;
}
}
}
return result;
};
});
}
function getElement(parent, selector) {
return new Promise(resolve => {
let result = parent.querySelector(selector);
if (result) return resolve(result);
const mutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;
const observer = new mutationObserver(mutations => {
for (let mutation of mutations) {
for (let node of mutation.addedNodes) {
if (node instanceof Element) {
result = node.matches(selector) ? node : node.querySelector(selector);
if (result) {
observer.disconnect();
return resolve(result);
}
}
}
}
});
observer.observe(parent, {
childList: true,
subtree: true
});
});
}
const plugin = (await getExports(5709)).Serializer();
const ele = await getElement(document, '.richText-container');
const prop = Object.keys(ele).find(p => p.startsWith('__reactInternalInstance'));
//写数据
ele[prop].child.stateNode.props.onChange({
operations: [],
value: plugin.textToValue('测试文本\nHello world')
});
//读数据
console.log(plugin.valueToText(ele[prop].child.stateNode.props.value));
})();

复制代码

这个plugin还可以转换别的类型，要搞图片之类的应该也可以做到，不嫌麻烦的话还可以研究一下自己搞一套转换函数出来，如果是纯文本或者格式比较固定，我感觉自己写比较好。

李恒道 · 发表于 2022-1-5 12:07:50

cxxjackie 发表于 2022-1-5 11:30
这个富文本框他的value是一个对象，结构比较复杂，我调试的时候找到了对象和文本互转的模块，问题是这个 ...

学到了...复杂程度震惊我了
cxxjackie大佬有什么推荐对这方面专门学习的教程或者资料么...
我一直想研究这方面
但是完全找不到地方入手
除了问你基本没有第二个地方存在这些方案和资料了...

哀吾生之须臾,羡cxxjackie之无穷

cxxjackie · 发表于 2022-1-5 12:55:44

李恒道发表于 2022-1-5 12:07
学到了...复杂程度震惊我了
cxxjackie大佬有什么推荐对这方面专门学习的教程或者资料么...
我一直想研究这 ...

我大部分都是直接啃源码的，再找一些零零散散的资料，这方面应该没什么系统性的教程，主要是有点旁门左道，除了油猴好像也没别的应用场景了。要说有什么教程的话，那还得看道哥写的

李恒道 · 发表于 2022-1-5 16:34:39

cxxjackie 发表于 2022-1-5 12:55
我大部分都是直接啃源码的，再找一些零零散散的资料，这方面应该没什么系统性的教程，主要是有点旁门左道 ...

懂了...大佬没事看react源码...怪不得
有推荐的学习资料么

cxxjackie · 发表于 2022-1-5 19:40:25

李恒道发表于 2022-1-5 16:34
懂了...大佬没事看react源码...怪不得
有推荐的学习资料么

我指的是网页的源码，这个应该说凭感觉和经验吧，要提高对那些带点混淆的代码的阅读能力，其实主要不是对框架的理解，而是对原生js的理解，基础还是很重要的。

李恒道 · 发表于 2022-1-6 10:53:26

cxxjackie 发表于 2022-1-5 19:40
我指的是网页的源码，这个应该说凭感觉和经验吧，要提高对那些带点混淆的代码的阅读能力，其实主要不是对 ...

懂了大佬，我研究研究找找方向