🦋

Blueskyに#ハッシュタグを実装するChrome拡張機能を作った！！

2024/02/12に公開

Chrome

はじめまして😊

Bluesky Clickable HashtagというBluesky公式ウェブクライアントにハッシュタグ機能を擬似的に再現する拡張機能を作成したけど、ユーザー数が伸びないので宣伝します😭

インストール

Chrome拡張機能は以下のページよりインストールできます。

また、SafariやFirefoxの方はGreasyforkからユーザースクリプト版をインストール出来ます。

どんな機能？

#から始まる文字を青色に装飾し、クリックしたときにそのタグの検索結果へ画面推移する機能を追加します。

画面推移の仕組み

BlueskyのウェブクライアントではReactが使用されています。

この拡張機能では、Reactのpropsを拝借して、そこからBlueskyが使用しているRouterのnavigationを取得し使用することで、ページを読み込みすることなく、画面の推移をすることを可能としています。

Propsの奪い方

開発者ツールからRouterのReact要素がありそうな要素を探して、プロパティを見てみましょう。

このようにReactのPropsは/__reactProps\$.*/という形で要素のプロパティに存在していることがわかると思います。

このPropsからchildrenを辿っていくと、BlueskyのRouterを操作することのできるnavigationを発見することが出来ます。

実際に以上の処理をスクリプトにしたのが以下のコードです。

// reactのpropsのプロパティは__reactProps + 乱数という形のため、正規表現で探す必要がある
function getPropsKey(elem) {
    let result = null;
    Object.keys(elem).forEach(key => {
        if(key.match(/__reactProps\$.*/) !== null) {
            result = key;
        } 
    });
    return result;
}

// routerのプロパティがあるであろう要素
const routerElem = document.querySelector("#root > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) ");

// blueskyのrouter
const navigation = routerElem[getPropsKey(routerElem)].children.props.children[0].props.children.props.children.props.children.props.value.navigation;

この手法はReactを使用している他のSPAサイト(e.g. Pixiv)などにも使用することが出来ます。

Chrome拡張機能でこの手法を使用する場合は必ずmanifest.jsonのworldをMAINにする必要があります。

デフォルトの状態だと、ContentScriptsから要素のプロパティを取得することが出来ません。

manifest.json

"content_scripts": [
  {
    "matches": ["https://bsky.app/*"],
    "run_at": "document_end",
    "js": ["userscript.user.js"],
    "world":"MAIN"
  }
]

このようにして、BlueskyのRouterを奪い取り、画面推移を実現しています。

まとめ

#公式は早くハッシュタグ実装しろ

インストール

どんな機能？

画面推移の仕組み

Propsの奪い方

まとめ

Discussion