⚡

Plasmoを使ってGitHub Actionsの画面をちょっと便利にするChrome拡張を作った

chilitreat

2023/12/01に公開

Chrome拡張

plasmo

tech

こんにちは、shiratahです。インターネットではchilitreat　という名前で活動しています。
弊社ではGitHubActionsを積極的に活用しています。GitHubのWeb UI上での面倒な操作をChrome拡張機能を作ってちょっと便利にした話を紹介します。

まずはじめに作ったものを

github-actions-workflow-viewer　というChromeの拡張機能を作りました。

Chrome Web Storeで公開しています。

パブリックリポジトリで公開しているのでこちらから実際のコードを確認できます。

なぜ作ったか

1リポジトリ内に大量にGitHubActionsのワークフローファイルがあるリポジトリがある（400個ぐらいワークフローあった）
いくつかの特定のワークフローは手動実行(workflow_dispatch)で実行する
GitHubのActionsタブから more workflows... のリンクをぽちぽちクリックして実行したいワークフローを表示させていた
毎回more workflows...を4,5回クリックして目的のワークフローを探すのが非常に面倒だった

最終的にどうなったか

今回作った拡張機能をブラウザにインストールすることで、GitHubリポジトリのActionタブを開くだけで、全てのワークフローを表示できるようになりました
手動実行したいワークフローの名前をCtrl+Fで検索するだけでパッと見つけられるようになりました！

プライベートリポジトリなので全体的にモザイクかかってますが、左メニューのワークフローファイルがどんどん読み込まれていってるのがわかると思います。

どうやって作ったか

タイトルにもあるように、Plasmoというブラウザの拡張機能を作れるフレームワークを使用しています。

https://www.plasmo.com/

この記事を見てPlasmoの存在を知り、試してみたかったので使ってみました。
Plasmoの紹介や簡単な使い方はこちらの記事にお任せします。

当方、フロントエンド全般は素人レベルなので誤りがあればご指摘ください！
以降は開発する中で実装したコードや詰まったところを紹介していきます

Content Scripts

Content ScriptsはWebページのコンテキストで実行されるファイル（JavaScript）です。
ページ内のDOMを読み取ったり、変更を加えることができます。

Chrome Doc: https://developer.chrome.com/docs/extensions/mv3/content_scripts/
Plasmo Doc: https://docs.plasmo.com/framework/content-scripts

今回作った拡張機能はページ表示後にContent Scripts内で以下の処理をすることで自動読み込みを実現しています

more workflows...のリンクがあるDOMを探す
DOMがあればクリックして読み込む

リンクとなるDOMをdocuments.querySelectorでDOMを捕捉して、clickメソッドを実行するだけのシンプルな実装です

MutationObserver

全てのワークフローを読み込むために、ページロード後3秒待って先ほどの関数を再帰的に実行... と愚直な方法で行っていましたが、なんか動きがもっさりするのでChatGPTに相談してみました。（当方poe.comをよく使ってます）

教えてもらった通りにMutaionObserverを使って書き換えてみるとすごくスムーズに読み込みできるようになりました。

MutationObserver、存在は知ってたけど実際に使ったことなかったので簡単に調べてみました。

new MutationObserver(moreLoadWorkflows)
- new MutationObserverでMutationObserverを生成して、コールバック関数として与えられたmoreLoadWorkflows関数を変更を検知するたびに実行する
observer.observe(document.documentElement, { childList: true, subtree: true })
- document.documentElement でHTML全体を対象とし、
- subtree, childListで、対象ノード(HTML全体)の変更を監視する
- つまり、何かDOMに変更が行われたときにmoreLoadWorkflows関数が発火するようになる

所感

過去にChrome拡張を作った経験はありました。その時はVue.jsを使って愚直に？実装をしていました。
Plasmoを使うことで、細かな設定が抽象化されていて少ないコードでそれっぽい拡張が作れてしまうのは感動でした。
pnpm create plasmoでプロジェクトを作成してから、なんとなく動くコードになるまで30分〜1時間ぐらいでできてしまいました。

Plasmoはサンプルコードが充実していて、ドキュメントに書いてない部分は大体このサンプル集を見ながら補完しています。
https://github.com/PlasmoHQ/examples

現段階では。まだワークフローを一覧で表示しただけなので、今後はContent Scripts UIを使ってオリジナルのUIを追加できないか試行錯誤してみようと思います。

株式会社アイスタイルPublication

コスメ・美容の総合サイト@cosme（アットコスメ）や関連サービスの企画・運営をしています。