Greasy Fork

請問如何設置加載特定網址.js裡的代碼，並且執行。
如https://softblog.tw/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-lazy-images/dist/lazy-images.js

    {
        "name": "軟體部落",
        "action": 0,
        "url": "^https?://softblog\\.tw/",
        "include": ".page-numbers",
        "nextLink": "a.next",
        "pageElement": "#blog-entries>[id^=post]",
        "rate": 3,
        "pageBar": 0
    },

設置"action": 0或1都無法顯示圖片，必須設置為2。

    {
        "name": "軟體部落",
        "action": 2,
        "url": "^https?://softblog\\.tw/",
        "include": ".page-numbers",
        "nextLink": "a.next",
        "pageElement": "#blog-entries>[id^=post]",
        "css": "inIframe:.boxed-layout #wrap .container{padding-left: 0px!important;padding-right:0px!important;}",
        "rate": 3,
        "pageBar": 0
    },

測試設置"action": 0或1的情況，只要把顯示圖片的代碼丟到F12主控台運行，就能顯示圖片。
但把整個代碼放到pageAction卻無法顯示圖片
不過"action": 1翻一頁後就卡住了

巴哈姆特的情況這樣設置就能顯示文章預覽圖
"pageAction": "Forum.B.lazyThumbnail();Forum.Common.drawNoImageCanvas();",

會發問只是想能不使用iframe模式就不用

    {
        "name": "軟體部落",
        "url": "^https?://softblog\\.tw/",
        "pageElement": "article.blog-entry",
        "pageAction": "eles.forEach(ele=>{let img=ele.querySelector('img');if(img){img.src=img.dataset.lazySrc;img.srcset='';}})"
    }

這樣就可以了。

action:1無效是因爲元素沒有到視野内，可以換用waitElement來加載圖片。但具體到這個站，只需要action:0就可以了

新版本（1.9.31.27）簡化了上述規則項，可以寫成這樣，兩者等價

    {
        "name": "軟體部落",
        "url": "^https?://softblog\\.tw/",
        "pageElement": "article.blog-entry",
        "lazyImgSrc": [
            "data-lazy-src",
            "srcset"
        ]
    }

歡迎把編輯好的規則項提交到github規則庫

軟體部落的問題解決了，直接靜態就能顯示圖片，感謝大大啊。

不過弱弱的問一句github規則庫在哪啊？

目前還有個站有問題請教您

    {
        "name": "avple.tv - 類別",
        "example": "https://avple.tv/tags/135/1/date",
        "action": 2,
        "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$",
        "exclude": "button[aria-label*='next'][tabindex='-1']",
        "nextLinkByUrl": [
            "(/\\d+/)(\\d+)(/\\w+)$",
            "$1{$2+1}$3"
        ],
        "pageElement": ".jss23",
        "replaceElement": ".jss15",
        "waitElement": [
            ".lazyload-wrapper>img",
            ".lazyload-wrapper>.lazyload-placeholder"
        ],
        "pageBar": 1,
        "css": "inIframe:header{display:none!important;}.jss23{margin-left:-7px;margin-right:7px;}",
        "fitWidth": false
    }

設置為"action": 1因為等不到waitElement完成卡在載入中，刪掉waitElement又無法顯示圖片，好像又不能用lazyImgSrc來解決，也找不到讓網站顯示圖片的代碼藏在哪，有能不使用"action": 2就顯示圖片的方法嗎？

我的理解是"action": 2是無限插入iframe來讀取整個網頁，感覺塞入了太多不必要的內容，想盡量避免使用，雖然很無腦又方便。
"action": 1是網頁底部插入一個iframe加載整個網頁後，只取出pageElement插入到本來的網頁，之後刪除iframe。

另外關於nextLinkByUrl，能不能再加個lastpage的設定，來判斷是否已是最後一頁，如網頁已經不包含下一頁的元素了。
測試用replaceElement替換頁碼條再搭配exclude，看能不能防止繼續翻頁，結果不行還是會繼續增加頁碼進行翻頁，只有直接跳轉到最後一頁才不會觸發翻頁，應該是exclude只會做一次判斷，翻下一頁後不會再判斷一次。

對於代碼小白nextLinkByUrl參照範例還能理解怎麼使用，但nextLinkByJs完全無法理解怎麼用，哈哈，所以當遇到頁碼是用JS沒有直接鏈接，對小白來說用nextLinkByUrl加lastPage這樣比較容易上手。

最後還有一個關於"history": 1

以小說站為例
由第一章翻到第二章預讀第三章，地址欄卻還是維持在第一章的鏈接沒有變化，瀏覽器歷史無第二章紀錄，由於預讀小說站後台紀錄閱讀到第三章，實則瀏覽器目前是閱讀第二章。
翻到第三章預讀第四章，地址欄這才顯示第二章的鏈接，瀏覽器歷史有了第二章的紀錄，由於預讀小說站後台紀錄閱讀到第四章，實則瀏覽器目前是閱讀第三章。

整個感覺就有點怪怪的慢了一拍，不該是翻到第三章，地址欄就顯示第三章的鏈接，瀏覽器歷史寫入第三章的紀錄這樣嗎？
如果本來就這樣設計，能不能增加"history": 2，翻到了哪一頁，地址欄地址和瀏覽器歷史是同步的。

好建議！我加入待辦列表了。明天試著優化一下你提到的幾點。

插句題外話，你有興趣幫我試用下這個類似同文堂的脚本，順便給些吐槽和改進意見嗎？

    {
        "name": "avple.tv",
        "author": "tony0809",
        "example": "https://avple.tv/tags/135/1/date",
        "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$",
        "action": 1,
        "nextLinkByUrl": [
            "(/\\d+/)(\\d+)(/\\w+)$",
            "$1{$2+1}$3",
            "[aria-label='Go to next page']:not(.Mui-disabled)"
        ],
        "pageElement": ".jss23",
        "replaceElement": ".jss15",
        "waitElement": [
            ".lazyload-wrapper>img",
            ".lazyload-wrapper>.lazyload-placeholder"
        ],
        "pageBar": 1,
        "history": 2,
        "css": "inIframe:header{display:none!important;}.jss23{margin-left:-7px;margin-right:7px;}"
    }

更新了以下幾點

1. nextLinkByUrl 第三項為必須存在的元素，第四項為必須不存在的元素，可以作爲停止條件
2. waitElement 現在可以兼容這種使用 material-ui 寫的站了
3. history: 2 為插入立即寫入歷史

新版本確實能使其顯示圖片了，但並非100%成功，翻頁有約30%機率或更高機率沒有顯示圖片，因為有些元素還是沒有變換完成。

代碼小白嘗試了好久...
觀察有顯示圖片和沒有顯示圖片，元素到底差在哪裡。
一開始img的class是jss29，span的class是jss28。需等待變成img.jss28才會顯示圖片，span.jss28變成span.jss29，才會清除span的佔位。
網頁有個css是.jss29{display:none;}

之後waitElement改成這樣，依然有5%的機率沒有顯示圖片，會有漏網之魚。

"waitElement": [
".lazyload-wrapper>img.jss28",
".lazyload-placeholder,span.jss28"
],

最後改成這樣再加上pageAction和css，總算是100%顯示圖片了，也不會有多餘的佔位。

"waitElement": [
".lazyload-wrapper>img",
".lazyload-placeholder"
],
"pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})",
"css": ".lazyload-wrapper+span.jss28{display:none!important;}"

弄好的完整規則

    {
        "name": "avple.tv - 類別",
        "author": "tony0809",
        "example": "https://avple.tv/tags/135/1/date",
        "url": "^https://avple\\.tv/tags/\\d+/\\d+/\\w+$",
        "action": 1,
        "nextLinkByUrl": [
            "(/\\d+/)(\\d+)(/\\w+)$",
            "$1{$2+1}$3",
            "[aria-label='Go to next page']:not(.Mui-disabled)"
        ],
        "pageElement": ".jss23",
        "replaceElement": ".jss15",
        "waitElement": [
            ".lazyload-wrapper>img",
            ".lazyload-placeholder"
        ],
        "pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})",
        "css": ".lazyload-wrapper+span.jss28{display:none!important;}",
        "pageBar": 1
    },
    {
        "name": "avple.tv - 搜索",
        "author": "tony0809",
        "example": "https://avple.tv/search?key=FC2PPV&page=1&sort=date",
        "action": 1,
        "url": "^https://avple\\.tv/search\\?key=",
        "nextLinkByUrl": [
            "(&page=)(\\d+)(&.+)$",
            "$1{$2+1}$3",
            "[aria-label='Go to next page']:not(.Mui-disabled)"
        ],
        "pageElement": ".jss23",
        "replaceElement": ".jss15",
        "waitElement": [
            ".lazyload-wrapper>img",
            ".lazyload-placeholder"
        ],
        "pageAction": "[].forEach.call(eles, ele=>{[].forEach.call(ele.querySelectorAll('img.jss29'), img=>{img.setAttribute('class','jss28')})})",
        "css": ".lazyload-wrapper+span.jss28{display:none!important;}",
        "pageBar": 1
    },

話說昨天看規則才發現，這個站的架構跟NETFLAV是一樣的，看了一下內建規則nextLink填a[aria-current='true']+a，居然就能獲取下一頁的鏈接，好神奇啊！
想說avple.tv也這樣寫行不行，//li[(button/@aria-current='true')]/following-sibling::li/button和[aria-label='Go to next page']，不過最多成功翻一頁後就卡住了，哈哈。

感謝大大辛苦更新了，腳本真的超好用！