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

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    结语

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

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

    已有2人评分好评 油猫币 贡献 理由
    wwwwwllllk + 1 + 7 很给力!
    懒男孩 + 1 + 5 + 1 ggnb!

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    860

    回帖

    1359

    积分

    荣誉开发者

    积分
    1359

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    明明大部分都是根据你写出来的!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

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

    请求哆唻C梦指点迷津
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    860

    回帖

    1359

    积分

    荣誉开发者

    积分
    1359

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

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

    哀吾生之须臾,羡cxxjackie之无穷
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    860

    回帖

    1359

    积分

    荣誉开发者

    积分
    1359

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

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

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    懂了...大佬没事看react源码...怪不得
    有推荐的学习资料么
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    860

    回帖

    1359

    积分

    荣誉开发者

    积分
    1359

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

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

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    632

    主题

    5156

    回帖

    6039

    积分

    管理员

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

    积分
    6039

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    懂了大佬,我研究研究找找方向
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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