🦢

Blueskyの数値を隠せるChrome拡張機能を作った

2023/05/14に公開

Chrome

Bluesky

tech

Blueswan というChrome拡張機能を作りました。Bluesky用の拡張機能です。

以下のページから、Google ChromeおよびChromium系のブラウザにインストール可能です。

リプライやリポスト、フォロワーや通知といった部分の数値を隠すことができます。どの数値を隠し、どれを表示したままにするかはユーザーが設定可能です。
また、完全に隠すのではなく、マウスホバーで表示することもできます。

全部隠した例

数が見えなくなるだけではあるのですが、実際に設定するとかなり使用感が変わると思います。数値に追われるのが苦手な方は一度試していただきたいです。

ソースコードはこちらのリポジトリで公開しています。

how it works

jsとcssによって「特定の数値を非表示にする」を実現しています。

jsは、設定に応じて、ページのbodyにクラスを追加します。例えばRepostを隠す設定がされていた場合、reposts-hideが追加されます。

cssは各項目について以下のような設定が書かれています。
これにより、bodyに特定のクラスがある（ユーザーが設定をしている）場合に、その部分の数値表示を消しています。

body.reposts-hide div[data-testid="repostBtn"] > div,
body.reposts-hover div[data-testid="repostBtn"]:not(:hover) > div {
  visibility: hidden;
}

先行事例

Twitter向けのおだやかTwitterという拡張機能があります。筆者も使用しています。
非表示処理の作成にあたってかなり参考にしました。

Bluesky向けには、Ucho-tenというクライアントがあります。デフォルトで数値を隠してくれます。

https://github.com/hota1024/ucho-ten

拡張機能紹介は以上です。

以下は開発の内部的なことについて筆者の備忘録です：

工夫した点

コード共通化

content_scripts（実際にページで実行されるスクリプト）とpopup（設定ポップアップ）の両方で必要な処理や定義はcommon.jsに共通化しています。

manifest.jsonでは、以下のようにcommon.js→content_scripts.jsの順で読み込みます。

manifest.json

{
  "content_scripts": [
    {
      "js": ["./scripts/common.js", "./scripts/content_scripts.js"]
    }
  ],
  "action": {
    "default_popup": "./pages/popup.html"
  },
  // 略...
}

popup.htmlでは、以下のようにcommon.js→popup.jsの順で読み込みます。

pages/popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 略... -->
  </head>
  <body>
    <!-- 略... -->
    <script defer src="../scripts/common.js"></script>
    <script defer src="../scripts/popup.js"></script>
  </body>
</html>

設定ポップアップでのWeb componentsの使用

設定ポップアップは基本的に設定ラベルとセレクトボックスの繰り返しなので、Web componentsを使って簡単に記述できるようにしました。

以下のように書くと

<visibility-select name="replys"></visibility-select>

以下の通りレンダリングされ、

<div part="wrapper">
  <div>Reposts</div>
  <select part="select" id="select-reposts" name="select-reposts" aria-label="select-reposts">
    <option value="show">SHOW</option>
    <option value="hover">HOVER</option>
    <option value="hide">HIDE</option>
  </select>
</div>

さらにイベントリスナーの設定と、値の初期化（chrome.storageから取得）を行います。

なお、内部の要素には直接CSSを適用できないため、定義時にpart属性を追加しています。

難しかった点

消したい場所にクラスがついていない

検証ツールでBlueskyのレンダリング出力を確認するとわかりますが、r-iphfwyみたいな意味のとれないクラス名が指定されています。 ~~ポストの部分にpostみたいなクラスがついていたらどんなに楽だったか…~~
これがいろんな場所についているので、特定の位置を指定するのが難しかったです。結局、cssではdiv.css-175oi2r.r-1pi2tsx > div > div > div > div > div > div > div.css-175oi2r.r-1pi2tsxといったかなり直接的な指定をしています。
Blueskyのマークアップ更新で壊れる可能性が高いので、もしスタイルの崩れを見つけたらissueにご一報いただけると幸いです。

ポップアップでの設定変更時に即反映する

ポップアップ画面で設定をリアルタイムで反映しようとして少し詰まりました。
前述の通り、開いているページのbodyのクラスを書き換える必要があるのですが、ポップアップ画面で読み込んでいるスクリプト（scripts/popup.js）が直接触れるのはポップアップ画面のhtmlのみです。
したがって、メッセージングAPIを使用してpopup.jsからcontent_scripts.jsを呼び出し、そちらでクラス設定処理を行う必要があります。

Web componentsのデバッグ

Web componentsを使おう！と思い立ったものの、正直知見がなかったので手探りでした。
既に書いているとおり、scripts/popup.jsは本体のhtmlページにアクセスしていないので、そもそもブラウザのdev toolsにログが出力されません…。
ポップアップ画面で右クリックメニューから「検証」を開き、ポップアップ画面用のdev toolsを表示する必要がありました。

ストアへの登録

最初に登録費用が$5かかります。知らなかった。

掲載用画像や説明文章の作成には以下のページが参考になりました。

自動公開にしておいたのですが、公開されても特に通知は来なかったので、「いつの間にか出ていた」という感じでした。