TwitterのリストTLでミュートを疑似実現するChrome拡張機能

自分用に適当に書いたタイトル通りのものを公開。
わたしの理解度の低さからコードがおかしいとかバグがある可能性が高いけど一応動いてるっぽいから公開。だれかきちんとしたもの作っておくれ。

自作の拡張機能の導入方法は↓とか見ておくれ。

自作したchrome拡張機能のインストール方法 | EXE MATE 株式会社

なんでこんなものが要るかというと、ここ最近になってリストのタイムラインにミュート、ブロック、被ブロックアカウントのツイートがリツイートで貫通して流れてくるようになったのよ。ワードミュートは元から機能してなかったけどね。

あまりにも不快度が高く快適とはいい難いので応急処置。

これは特定のワードを含むツイートを非表示にするもの。
この方法であれば@xと指定をすれば@xのツイートや@ｘを含むツイートが非表示に出来る。もちろん(？)メンションとかも非表示になる。

拡張機能はmanifest.json、background.js、content.jsの3ファイルで構成。

manifest.json

{
  "manifest_version": 3,
  "name": "指定した垢をリストTLから消したり",
  "version": "1.1",
  "permissions": ["tabs", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "host_permissions": [
    "https://twitter.com/i/lists/0000000000000000000"
  ]
}

これは拡張機能の定義ファイルみたいなもの。
ちなみにググるとマニフェストv2の説明が多くて混乱する。

list/～の部分は対象にしたいリストのURLに合わせて書き換えてね。
読み込み都度に非表示したいものを消していくのでバックグランド動作。

background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (tab.url.indexOf('https://twitter.com/i/lists/0000000000000000000') > -1) {
    chrome.scripting.executeScript({
      target: {
        tabId: tab.id
      },
      files: ['content.js'],
    });
  }
});

この書き方で正しいのかはイマイチ分からない。
実際に非表示の処理を行うのはfilesで指定してるcontent.jsだよ。適用したいリストのURLを指定してみてね。

content.js 

var mute_accounts = ['@rikyou_moe', '@rikyou_moe2']
var show_more = 'ポストをさらに表示';
var mute_count = mute_accounts.length;
var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {　　　　
    if (mutation.addedNodes) {　　　　　
      mutation.addedNodes.forEach(function (node) {　　　　　　　　
        for (var i = 0; i < mute_count; i++) {
          if (node.nodeType === 1 && node.matches('div[data-testid="cellInnerDiv"]') && node.textContent.includes(mute_accounts[i])) {
            node.style.display = 'none';　　　　　　
          }
        }　　　　　　　　
        if (node.nodeType === 1 && node.matches('div[data-testid="cellInnerDiv"]') && node.textContent.includes(show_more)) {
          node.style.backgroundColor = 'red';
        }
      });
    }
  });
});
observer.observe(document.body, {
  childList: true,
  subtree: true
});

この例では@rikyou_moe、@rikyou_moe2というわたしのアカウントを対象にしてるけどわたしのこと非表示にしないでよ？？

https://note.com/maddogmtg/n/n2b9b48540149

こちらのnoteによればツイートはdiv[data-testid="cellInnerDiv"]というdivに格納されているのでこれを非表示にするように動作させる。

なので配列変数mute_accountsの要素と完全一致する文字列がツイートに含まれていたら非表示にするよ。変数名はaccountsってなってるけど実際にはアカウントじゃなくてワード指定の非表示機能というのが正解。だから消したいものを配列に追加していったらいいよ。対象は多くなるようなら改行して見やすくしたり、まぁ各自考えてね。

あとこれ。

        if (node.nodeType === 1 && node.matches('div[data-testid="cellInnerDiv"]') && node.textContent.includes(show_more)) {
          node.style.backgroundColor = 'red';

この部分はポストをさらに表示の背景を赤くする処理。

これ、結構な確率で見落としてるんじゃないかなって思ってる。

今回は以上。
だれか使いやすいの作ってださい。