monorepo の GitHub Actions workflow 一覧が膨れて辛い問題を Chrome 拡張で解決した

課題: monorepo の workflow 一覧がつらい

monorepo あるあるとして、GitHub Actions の workflow 数が膨れがちという問題がある。

チーム・領域ごとに frontend/build, frontend/lint, backend/deploy のように命名規則でプレフィックスを付けて整理しようとしても、GitHub の Actions サイドバーではすべてフラットに一覧表示される。workflow が数十個を超えると目的の workflow を探すのが地味につらい。

さらに、workflow 数が多いと「Show more」ボタンを何度もクリックしないと全件表示されないという副次的な問題もある。

解決: Chrome 拡張 gha-workflows-folder

https://github.com/kimuchanman/gha-workflows-folder

workflow 名に含まれる / を区切りとして、サイドバーを折りたたみ可能なフォルダにグループ化する Chrome 拡張を作った。

Before / After

Before (フラット表示)	After (フォルダ表示)

フォルダ名の横に含まれる workflow 数がバッジで表示され、クリックで展開・折りたたみができる。

仕組み

Manifest V3 の Content Script として動作する。主なポイントを紹介する。

1. workflow 名の最初の / でフォルダ分割

workflow 名 frontend/tests/unit → フォルダ frontend、表示名 tests/unit のように、最初の / だけで分割するようにした。サブディレクトリまでサポートすると、サポートする深さ次第でUIを損ねることなどが考えられ、考えることが一気に増えると思ったのと、これは workflow のグルーピングをしたいという話なので最初のフォルダだけで十分だと判断したため。

const slashIndex = fullName.indexOf("/");
const folderName = fullName.substring(0, slashIndex);
const shortName = fullName.substring(slashIndex + 1);

2. 「Show more」を並列フェッチで一括展開

GitHub の Actions ページは workflow 数が多いとページネーションされ、「Show more」ボタンが出る。この拡張では GitHub 内部の workflows_partial エンドポイントを使い、残りのページを Promise.all で並列フェッチして一気に DOM に挿入する。手動で何度もクリックする必要がなくなる。

const responses = await Promise.all(
  pages.map((page) =>
    fetch(`${baseSrc}&page=${page}`, {
      headers: { Accept: "text/html" },
      credentials: "include",
    }).then((r) => (r.ok ? r.text() : ""))
  )
);

3. SPA ナビゲーション対応

GitHub は Turbo による SPA ナビゲーションを使っているため、ページ遷移時に DOM が丸ごと差し替わる。MutationObserver と Turbo イベント (turbo:load, turbo:frame-render) の両方を監視して、ナビゲーション後にも自動でフォルダ化を再適用する。

4. テーマ対応

GitHub の Primer CSS 変数を使い、light / dark / dim すべてのテーマに対応している。

インストール方法

https://github.com/kimuchanman/gha-workflows-folder

1. リポジトリを clone
2. Chrome で chrome://extensions を開く
3. 「デベロッパーモード」を有効化
4. 「パッケージ化されていない拡張機能を読み込む」でフォルダを指定

まとめ

うちでは monorepo の workflow 命名パターンとして / 区切りのプレフィックスを付けてグルーピングの雰囲気作りを頑張っていたのだが、GitHub の UI がそれをフォルダとして扱ってくれないのが長年のペインだった。割とシンプル実装な Chrome 拡張で日々の小さなストレスを解消できた。

同じ悩みを持つ方はぜひ試してみてほしい。