GitHub Star Marker

日本語 | English

GitHub Star Marker は、GitHub のユーザー / Organization ページ上で、表示されているリポジトリを自分がスター済みかどうか分かるようにするブラウザ拡張機能です。

スター済みのリポジトリには、リポジトリ名の横に黄色い星を表示します。未スター、確認中、トークン未設定などの状態では、GitHub の見た目を邪魔しない控えめな星として表示します。

主な機能

• GitHub の pinned repositories でスター済みリポジトリを可視化
• Organization の repositories 一覧でスター済みリポジトリを可視化
• GitHub GraphQL API の viewerHasStarred を使った正確な判定
• GitHub Personal Access Token を拡張機能のオプション画面に保存
• 短時間キャッシュで同じリポジトリへの API 呼び出しを削減
• Chrome / Firefox 向けにビルド可能

対応ページ

• https://github.com/<user>
• https://github.com/<org>
• https://github.com/<user>?tab=repositories
• https://github.com/<org>?tab=repositories
• https://github.com/orgs/<org>/repositories

GitHub の DOM や画面構造が変わると、表示位置の調整が必要になる場合があります。

インストール

通常の利用では git clone は不要です。

1. Releases を開きます。
2. 最新リリースから Chrome 用の github-star-marker-<version>-chrome.zip をダウンロードします。
3. ダウンロードした zip を展開します。
4. Chrome で chrome://extensions/ を開きます。
5. 右上の デベロッパー モード を有効にします。
6. パッケージ化されていない拡張機能を読み込む から、展開したフォルダを選択します。

Firefox で試す場合は、Firefox 用の github-star-marker-<version>-firefox.zip をダウンロードして展開し、about:debugging の 一時的なアドオンを読み込む から展開先の manifest.json を選択してください。

開発者向けセットアップ

bun install
bun run build

Chrome では dist/chrome-mv3 を unpacked extension として読み込んでください。

Firefox 用にビルドする場合:

bun run build:firefox

生成された Firefox 用の出力 dist/firefox-mv2 を about:debugging から読み込んでください。

開発

Chrome 向けの開発サーバー:

bun run dev

Firefox 向けの開発サーバー:

bun run dev:firefox

型チェック:

bun run typecheck

GitHub トークン

拡張機能のオプション画面を開き、GitHub Personal Access Token を保存してください。

Personal Access Token の作成方法

1. GitHub の Fine-grained personal access token 作成画面 を開きます。
2. Resource owner で、確認したいリポジトリの owner を選びます。
3. Repository access は、公開リポジトリだけ確認したい場合は public repositories を選びます。private repository も判定したい場合だけ、対象リポジトリを絞って選択してください。
4. Account permissions で Starring: Read を付与します。
5. Repository permissions は、公開リポジトリ確認だけなら標準の metadata read access で十分です。private repository を対象にする場合は、そのリポジトリを読める最小限の権限を付与してください。
6. 作成した token をコピーし、拡張機能のオプション画面に貼り付けて保存します。保存時の確認では viewer.login も読めることを検証します。

Classic token を使う場合は、公開リポジトリだけなら追加 scope なしで試せます。private repository を対象にする場合は repo scope が必要になることがありますが、可能なら fine-grained token を使い、対象リポジトリを絞ることをおすすめします。

トークンは chrome.storage.local / browser.storage.local 相当のローカルストレージに保存されます。GitHub API への問い合わせ以外には使いません。

仕組み

1. Content script が GitHub ページ上のリポジトリリンクから owner/repo を抽出します。
2. Background script に { type: "CHECK_STARRED", repos: string[] } を送ります。
3. Background script が GitHub GraphQL API にまとめて問い合わせます。
4. viewerHasStarred の結果をもとに、ページ上のリポジトリ名の横へ星を表示します。
5. 結果は短時間キャッシュされ、ページ内遷移や再描画で同じ問い合わせが増えすぎないようにします。

注意事項

• GitHub Enterprise Server は現在サポート対象外です。
• GitHub のページ構造変更により、星が表示されなくなる可能性があります。
• Firefox ビルドでは、WXT から Firefox 用 manifest に関する警告が表示される場合があります。

ライセンス

MIT