油猴脚本

• 有两版本tampermonkey、greasespot
• tampermonkey的文档：
  Tampermonkey • 文档、Tampermonkey • 常问问题
  油猴中文网 - 油猴脚本分享交流的论坛 (tampermonkey.net.cn)
• 输出(Output)窗口（命令行窗口/控制台）
  在不同的插件页面均可打开控制台。
  插件页面：extension://iikmkjmpaadaobahmlepeloendndfphd/options.html、edge://extensions/?id=iikmkjmpaadaobahmlepeloendndfphd（background）
  options是浏览器的角度设置插件，backgroud是控件自身的功能
  打开控制台：Ctrl-Shift-J
  参见帮助
  
  检查弹出窗口即检查视图。
  后面自然的会打开DevTools的Console，以上检查视图也不知道哪去了...

• 术语：scheme，如http://、https://。

• Original include/match/exclude>User (custom) include/match/exclude

  参见FAQ

• Export to Zip/File, Import from URL/File/Cloud.

  类型：data (storage) / config (setting) / resource
  extension://iikmkjmpaadaobahmlepeloendndfphd/options.html#nav=utils

• action menu、context menu
  对应有Dashboard（扩展选项）、Option（管理扩展）窗口
  参见FAQ
• 笔记：
  • [油猴脚本开发指南]脚本往页面上添加新元素-油猴中文网 (tampermonkey.net.cn)
    

    innerText、innerHTML
    容器div、span（块级、内联元素，参见HTML <div> 和 <span> (w3school.com.cn)）
    event.target.[id/class]
    onclick/addEventListener("click")
    function onEvent(event) return false end//不传递
    element.id/className
    element.style.color、element<style='coloer:xxx'>
    DOMNodeInserted
    GM_xmlhttpRequest/XMLHttpRequest

  • [油猴脚本开发指南]外部资源引用-油猴中文网 (tampermonkey.net.cn)
    

    @require、document.createElement'script'/'link'
    @resource css url

    document-start/body/end/idle/context-menu
    GM_registerMenuCommand/GM_unregisterMenuCommand

  • [油猴脚本开发指南]使用GM_addStyle去除网页广告-油猴中文网 (tampermonkey.net.cn)
    

    GM_addStyle('#id{display:none !important}')
    iframe
    window.location.href
    切换作用域（上下文）
    weburl.indexOf

  • [油猴脚本开发指南]油猴hook - 实现b站评论小尾巴-油猴中文网 (tampermonkey.net.cn)
    

    object.prototype.prototypeFunc
    func.apply/call(this,arg..)
    #object-anonymous（类）
    XMLHttpRequest（XHR）、fetch
    encodeURIComponent

  • [油猴脚本开发指南]简易this教程-油猴中文网 (tampermonkey.net.cn)
    

    this、Call/Apply
    object.method.call(another-object)
    apply(arg,..) call(object)

  • [油猴脚本开发指南]去除网页广告以及判断去除元素-油猴中文网 (tampermonkey.net.cn)

    min-height 滚动轴
    querySelectorAll（只读列表，列表≠数组）
    for进行循环

  • [油猴脚本开发指南]箭头函数的特性-油猴中文网 (tampermonkey.net.cn)

    ES6=ECMAScript 6、JavaScript 语言
    箭头函数（匿名lambda表达式），其基于upvalue（静态作用域）（而非环境）（原教程貌似有误）

  • [油猴脚本开发指南]原型与原型链-油猴中文网 (tampermonkey.net.cn)
    new新对象（环境）（对应其上下文this）
  • [油猴脚本开发指南]基本油猴编程的一些常见误区-油猴中文网 (tampermonkey.net.cn)

    document.querySelector('#iframe').contentWindow.document.querySelector（穿透）
    document.querySelector('.parent-id .grandchild-id [name='name']")（不用连续）
    MutationObserver/DOMNodeInserted
    Promise-then、asyn-await

  • [油猴脚本开发指南]XHR的返回内容劫持-油猴中文网 (tampermonkey.net.cn)
    Proxy+Reflect
  • [油猴脚本开发指南]实战抖音短视频无水印下载-油猴中文网 (tampermonkey.net.cn)

    json在线格式化的工具
    var、let
    escape 和 unescape、encodeURI 和 decodeURI、encodeURIComponent 和 decodeURIComponent
    JSON.parse(string)、JSON.stringify(object)
    由服务器渲染好传输，或由客户端异步获取服务器数据再本地渲染

  • [油猴脚本开发指南]基础的网页调试(一)-油猴中文网 (tampermonkey.net.cn)
    搜索、代码格式化、断点、条件断点、作用域、堆栈、XHR/提取（Fetch）断点、DOM断点
  • [油猴脚本开发指南]基础的脚本调试(二)-油猴中文网 (tampermonkey.net.cn)

    debugger
    抓油猴的数据包

  • [油猴脚本开发指南]基础的网络分析(三)-油猴中文网 (tampermonkey.net.cn)

    网络抓包（拦截签到等、请求分类）
    请求分类：文件=路径、发起者XHM/FETCH、类型json/plain
    请求头、响应头，Cookie，堆栈跟踪
    用户生成的协议头参照网页协议头
    对比原包与脚本生成的包
    储存：Cookie、会话、本地存储（、缓存储存）

  • [油猴脚本开发指南]基本油猴编程的一些常见误区(二)-油猴中文网 (tampermonkey.net.cn)

    setInterval+clearInterval
    addeventlistener、mutationobserve
    （React、VUE）库（特有属性）
    注入点/webpack

  • [油猴脚本开发指南]元素规则校验和检测的触发-油猴中文网 (tampermonkey.net.cn)

    var event = new Event('change');
    element.dispatchEvent(event);
    事件监听器（去掉祖先）（focus-input-change、propertychange-blur）
    $._data(element,'events');
    Object.keys(element)获取元素的所有键名，然后可.find
    REACT（组件、框架）是总的响应入口，其下是onChange(event)
    React Developer Tools

• 代码测试：
  
  • 最基本的
    

    alert("begin");
    
    (function() {
        'use strict';
        alert("run function");
    })();
    
    alert("end");

    将依次弹出通知对话框begin-run function-end
• Tampermonkey • Documentation\GM_xmlhttpRequest
  

  GM_xmlhttpRequest({
      url:"http://...",
      method :"GET",
      nocache:true,
      headers: {
          "Host":"...",
          "Connection":"...",
          "Pragma":"...",
          "Cache-Control":"...",
          "Accept":"...",
          "User-Agent":"...",
          "token":"...",
          "Referer":"...",
          "Accept-Encoding":"...",
          "Accept-Language":"...",
      },
      onload:function(xhr){
          console.log("onload",xhr);
      },
      onabort:function(arg){
          console.log("onabort",arg);
      },
      onerror:function(arg){
          console.log("onerror",arg);
      },
      onloadstart:function(arg){
          console.log("onloadstart",arg);
      },
      onprogress:function(arg){
          console.log("onprogress",arg);
      },
      onreadystatechange:function(arg){
          console.log("onreadystatechange",arg);
      },
      ontimeout:function(arg){
          console.log("ontimeout",arg);
      },
  });

  Post的话有data参数（非通过url传参） 

• 前端面试题：JS中的let和var的区别 - FlyDragon - 博客园 (cnblogs.com)
  函数、块作用域，涉及提升、死区。
  javascript的 {} 语句块详解_基础知识_脚本之家 (jb51.net)
  原生查找DOM的方法 - chenyongTao - 博客园 (cnblogs.com)
  dom获取节点（子节点、兄弟节点、父节点）_一晌贪欢i的博客-CSDN博客_dom获取兄弟节点

  getElementsByTagName/childNodes/children/ firstChild/firstElementChild / lastChild/lastElementChild / parentNode/parentElement / offsetParent / previousSibling/previousElementSibling / nextSibling/nextElementSibling
  w3c/ie标准
  节点(Node)或含空行、元素(Element)不含空节点

• innerText、textContent是获取子孙节点所有的文本，nodeValue是当前节点的值。
• 初始化，使用// @run-at       document-end+document.onload还是不行，可以考虑setInterval+clearInterval。
• MutationObserver监控节点结构、属性变化，对于值变化，直接对节点用onchange？
  好像不行，那是对如input等类型由用户交互触发的变化的响应，内部直接赋值操作不可..
• js的正则需要str.match(/pattern/)，其中str可以直接是字符串，模式非字符串，需要用/../。
  参见：js中正则表达式的模式匹配 - seven7seven - 博客园 (cnblogs.com)
  测试：regex101: build, test, and debug regex
• 在调试阶段中，在逐过程使用setTimeout，避免重复触发..（即便中断，仍会触发？）
  脚本被重复执行？（导致错误）