【折腾】GM_スクリプト「取り戻し」Feedly内の購読元のアドレス

仮想デスクトップのショートカットキーはまだ完璧に覚えられていません#

要件の説明#

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を選択しました。
エラーメッセージの要素がクリックされた場合、次の操作を実行します。主な手順は次のとおりです：
- 現在のアドレスから購読元の部分を取得します。
- デコードします。
- ページに出力します。
↑前の 2 つの手順の順序は入れ替えることができます。
ページに出力する際には、element.insertAdjacentHTML - Web API Reference | 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 // ヒントの2行がトリガーされるようにする
    ) {
      // 条件が正しいことを確認するために再度出力する
      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
// ----------------------------

もう 1 つの関連記事：20100222433