【折騰】GM_腳本「取回」Feedly內的訂閱源地址

虛擬桌面的快捷鍵仍然絕贊記不住 ing#

需求描述#

Feedly 中查看已訂閱項目時，地址欄顯示是這樣：

https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Ffeed.wdssmq.com

https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fwww.wdssmq.com%2Ffeed.php

「訂閱源地址」部分是轉碼過的，雖然對於比較短的地址還是可以直接人肉識別出來，另外，在「···→More settings」中也是可以看到源地址回顯的。。

吐槽：

【果然從博客建議之初就是「不想配圖」星人，，，即使改用「Markdown + 免費圖床」後也沒能提升多少；

【Feedly 這個回顯也是過了很久才半途加上的。。

但是，對於某些出問題的訂閱源，會提示下邊信息然後不給你查看源地址的選項：

<div id="feedlyPageFX" class="container centered">
  <h2 class="Heading Heading--h2">
    Feed not found
    <div class="sub">Wrong feed URL or dead feed</div>
  </h2>
</div>

作為「GM_腳本」狂魔果然還是決定自己解決這個痛點順便水一篇文章；

代碼實現及講解#

需要這樣 “取回” 訂閱源的頻度還是略低的，所以設置為點擊觸發就好；
因為 Feedly 使用的是前端渲染機制，上邊提示對應的 html 在「源碼查看」中其實並不存在，也就是屬於「未來元素」，所以「監聽事件」需要設置在會包含該「未來元素」的現存的元素節點上，本例中就是body#box；

<body id="box" class="home">
…………
</body>

監聽事件：點擊、按下、彈起，這裡都可以，代碼中選用了mouseup；
當有錯誤提示的元素被點擊時，執行後續操作，主要有三步：
- 從當前地址中拿到訂閱源的部分；
- 解碼；
- 輸出到頁面；
↑前兩步順序可以互換；
輸出到頁面時使用了element.insertAdjacentHTML - Web API 接口參考 | MDN，類似 JQuery 中的.append()方法；
具體輸出到哪個元素中要也要分析和嘗試，然後視情況使用上現有的樣式類；

(function () {
  "use strict";
  function $n(e) {
    return document.querySelector(e);
  }
  function $na(e) {
    return document.querySelectorAll(e);
  }
  function addEvent(element, evnt, funct) {
    return element.addEventListener(evnt, funct, false);
  }
  // 拿回訂閱源地址
  // 綁定監聽事件到 div#box 上
  addEvent($n("#box"), "mouseup", function (event) {
    // 輸出觸發事件的元素
    console.log(event.target);
    // 根據內容判斷是否執行相應操作
    const elText = event.target.innerHTML;
    if (
      // elText.indexOf("Feed not found") > -1 ||
      elText.indexOf("Wrong feed URL") > -1 // 保證提示信息中的兩行都能觸發
    ) {
      // 內部再輸出一次確定判斷條件正確
      console.log(event.target);
      // 拿到解碼後的訂閱源地址
      const curUrl = ((url) => {
        return url.replace("https://feedly.com/i/subscription/feed/", "");
      })(decodeURIComponent(location.href));
      // 輸出到頁面中
      $n("#feedlyPageFX h2").insertAdjacentHTML(
        "beforeend",
        `<div class="sub">${curUrl}</div>`
      );
    }
  });
})();

結束#

自用 Feedly 完整腳本地址見：

// ----------------------------
// @raw    https://github.com/wdssmq/userscript/tree/master/feedly
// @raw    https://greasyfork.org/zh-CN/scripts/381793
// ----------------------------
// @link   https://afdian.net/@wdssmq
// @link   https://github.com/wdssmq/userscript
// @link   https://greasyfork.org/zh-CN/users/6865-wdssmq
// ----------------------------

另一篇相關文章：20100222433