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

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

[复制链接]

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 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]

结语

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

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

已有1人评分好评 油猫币 贡献 理由
懒男孩 + 1 + 5 + 1 ggnb!

查看全部评分 总评分:好评 +1  油猫币 +5  贡献 +1 

混的人。

9

主题

222

帖子

559

积分

开发者

Rank: 6Rank: 6

积分
559

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

发表于 2021-12-29 11:50:30 | 显示全部楼层
好!学习了,道哥牛逼!
回复

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2021-12-29 11:59:35 | 显示全部楼层
cxxjackie 发表于 2021-12-29 11:50
好!学习了,道哥牛逼!

明明大部分都是根据你写出来的!
混的人。
回复

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2022-1-4 22:40:53 | 显示全部楼层
cxxjackie 发表于 2021-12-29 11:50
好!学习了,道哥牛逼!

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

请求哆唻C梦指点迷津
混的人。
回复

使用道具 举报

9

主题

222

帖子

559

积分

开发者

Rank: 6Rank: 6

积分
559

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

发表于 2022-1-5 11:30:51 | 显示全部楼层
李恒道 发表于 2022-1-4 22:40
大佬...
又碰到不会的东西了
https://creator.guanghe.taobao.com/#/pub/video

这个富文本框他的value是一个对象,结构比较复杂,我调试的时候找到了对象和文本互转的模块,问题是这个模块貌似没有全局访问的入口,是通过webpack加载的,我找了半天也没找到注入点,没办法只能劫持一下webpack:
  1. // ==UserScript==
  2. // @name         TaobaoTest
  3. // @description  ...
  4. // @namespace    Sency
  5. // @author       Sency
  6. // @version      1.0
  7. // @match        https://market.m.taobao.com/app/ali-content-platform/content-publish/index.html*
  8. // @run-at       document-start
  9. // ==/UserScript==

  10. (async function() {
  11.     'use strict';
  12.     function getExports(id) {
  13.         const _call = Function.prototype.call;
  14.         return new Promise(resolve => {
  15.             Function.prototype.call = function() {
  16.                 const result = _call.apply(this, arguments);
  17.                 if (arguments.length === 4 && arguments[1] && arguments[1].exports && arguments[0] === arguments[2]) {
  18.                     for (let key in arguments[1]) {
  19.                         if (key !== 'exports' && arguments[1][key] === id) {
  20.                             resolve(arguments[1].exports);
  21.                             Function.prototype.call = _call;
  22.                             break;
  23.                         }
  24.                     }
  25.                 }
  26.                 return result;
  27.             };
  28.         });
  29.     }
  30.     function getElement(parent, selector) {
  31.         return new Promise(resolve => {
  32.             let result = parent.querySelector(selector);
  33.             if (result) return resolve(result);
  34.             const mutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;
  35.             const observer = new mutationObserver(mutations => {
  36.                 for (let mutation of mutations) {
  37.                     for (let node of mutation.addedNodes) {
  38.                         if (node instanceof Element) {
  39.                             result = node.matches(selector) ? node : node.querySelector(selector);
  40.                             if (result) {
  41.                                 observer.disconnect();
  42.                                 return resolve(result);
  43.                             }
  44.                         }
  45.                     }
  46.                 }
  47.             });
  48.             observer.observe(parent, {
  49.                 childList: true,
  50.                 subtree: true
  51.             });
  52.         });
  53.     }
  54.     const plugin = (await getExports(5709)).Serializer();
  55.     const ele = await getElement(document, '.richText-container');
  56.     const prop = Object.keys(ele).find(p => p.startsWith('__reactInternalInstance'));
  57.     //写数据
  58.     ele[prop].child.stateNode.props.onChange({
  59.         operations: [],
  60.         value: plugin.textToValue('测试文本\nHello world')
  61.     });
  62.     //读数据
  63.     console.log(plugin.valueToText(ele[prop].child.stateNode.props.value));
  64. })();
复制代码

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

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2022-1-5 12:07:50 | 显示全部楼层
cxxjackie 发表于 2022-1-5 11:30
这个富文本框他的value是一个对象,结构比较复杂,我调试的时候找到了对象和文本互转的模块,问题是这个 ...

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

哀吾生之须臾,羡cxxjackie之无穷
混的人。
回复

使用道具 举报

9

主题

222

帖子

559

积分

开发者

Rank: 6Rank: 6

积分
559

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

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

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

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

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

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

使用道具 举报

9

主题

222

帖子

559

积分

开发者

Rank: 6Rank: 6

积分
559

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

发表于 2022-1-5 19:40:25 | 显示全部楼层
李恒道 发表于 2022-1-5 16:34
懂了...大佬没事看react源码...怪不得
有推荐的学习资料么

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

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2022-1-6 10:53:26 | 显示全部楼层
cxxjackie 发表于 2022-1-5 19:40
我指的是网页的源码,这个应该说凭感觉和经验吧,要提高对那些带点混淆的代码的阅读能力,其实主要不是对 ...

懂了大佬,我研究研究找找方向
混的人。
回复

使用道具 举报

发表回复

本版积分规则

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