油猴腳本

• 有兩版本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，避免重復觸發..（即便中斷，仍會觸發？）
  腳本被重復執行？（導致錯誤）