[油猴脚本开发指南]基本油猴编程的一些常见误区(二)
# 前言本文总结了目前来说大家依然常常犯错或者常见的问题，很多问题已经可以称的上老生常谈了，唉
# 找不到元素怎么办？
可以参考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](https://bbs.tampermonkey.net.cn/thread-967-1-1.html)
关于Mutationobserve可以去参考以下文章
[油猴脚本开发指南]MutationObserver的使用
[https://bbs.tampermonkey.net.cn/thread-988-1-1.html](https://bbs.tampermonkey.net.cn/thread-988-1-1.html)
[油猴脚本开发指南]Mutation Event性能影响简易测试
[https://bbs.tampermonkey.net.cn/thread-1006-1-1.html](https://bbs.tampermonkey.net.cn/thread-1006-1-1.html)
[油猴脚本开发指南]MutationObserver简单详解
[https://bbs.tampermonkey.net.cn/thread-1007-1-1.html](https://bbs.tampermonkey.net.cn/thread-1007-1-1.html)
[油猴脚本开发指南]MutationObserver简易例子
[https://bbs.tampermonkey.net.cn/thread-1008-1-1.html](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-1017-1-1.html)
# 我设置了元素但是点击登录依然没有用
这时候多半是框架的问题
我们虽然设置了内容但是没有做元素相关的校验
这时候需要对其进行特殊的处理
具体可以去参考
[油猴脚本开发指南]元素规则校验和检测的触发
https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
# 我该如何判断网页到底是什么库？
通常打印window下的一些特有属性即可
比如确定是否为vue页面
尝试打印是否存在window.**VUE_DEVTOOLS_TOAST** 属性，如果存在通常为vue页面
但是我最近找到一个比较好用的插件Wappalyzer
可以直接查看当前页面是什么框架
大家也可以安装上插件，根据提示的框架来对其进行针对性处理
但是也不是万能的，根据测试有一部分网站找不到任何信息。
# 我该如何处理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
好！学习了，道哥牛逼！
明明大部分都是根据你写出来的！ cxxjackie 发表于 2021-12-29 11:50
好！学习了，道哥牛逼！
大佬...
又碰到不会的东西了
https://creator.guanghe.taobao.com/#/pub/video
输入正文那里
我看好像是React+Ant-design
但是完全找不到数据的设置点
想做到设置数据到那个富文本编辑器以及读取数据
请求哆唻C梦指点迷津 李恒道 发表于 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 && arguments.exports && arguments === arguments) {
for (let key in arguments) {
if (key !== 'exports' && arguments === id) {
resolve(arguments.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.child.stateNode.props.onChange({
operations: [],
value: plugin.textToValue('测试文本\nHello world')
});
//读数据
console.log(plugin.valueToText(ele.child.stateNode.props.value));
})();
这个plugin还可以转换别的类型，要搞图片之类的应该也可以做到，不嫌麻烦的话还可以研究一下自己搞一套转换函数出来，如果是纯文本或者格式比较固定，我感觉自己写比较好。 cxxjackie 发表于 2022-1-5 11:30
这个富文本框他的value是一个对象，结构比较复杂，我调试的时候找到了对象和文本互转的模块，问题是这个 ...
学到了...复杂程度震惊我了
cxxjackie大佬有什么推荐对这方面专门学习的教程或者资料么...
我一直想研究这方面
但是完全找不到地方入手
除了问你基本没有第二个地方存在这些方案和资料了...
哀吾生之须臾,羡cxxjackie之无穷 李恒道 发表于 2022-1-5 12:07
学到了...复杂程度震惊我了
cxxjackie大佬有什么推荐对这方面专门学习的教程或者资料么...
我一直想研究这 ...
我大部分都是直接啃源码的，再找一些零零散散的资料，这方面应该没什么系统性的教程，主要是有点旁门左道，除了油猴好像也没别的应用场景了。要说有什么教程的话，那还得看道哥写的{:4_95:} cxxjackie 发表于 2022-1-5 12:55
我大部分都是直接啃源码的，再找一些零零散散的资料，这方面应该没什么系统性的教程，主要是有点旁门左道 ...
懂了...大佬没事看react源码...怪不得
有推荐的学习资料么 李恒道 发表于 2022-1-5 16:34
懂了...大佬没事看react源码...怪不得
有推荐的学习资料么
我指的是网页的源码，这个应该说凭感觉和经验吧，要提高对那些带点混淆的代码的阅读能力，其实主要不是对框架的理解，而是对原生js的理解，基础还是很重要的。 cxxjackie 发表于 2022-1-5 19:40
我指的是网页的源码，这个应该说凭感觉和经验吧，要提高对那些带点混淆的代码的阅读能力，其实主要不是对 ...
懂了大佬，我研究研究找找方向
页:
[1]