GitHubでコミット差分のページURLを生成するChrome拡張を作りました。
一度コードレビューして貰ったPRの再レビューで、修正した部分のみをレビュワーに共有したい時に、コミット比較のページを共有することがありました。例えば、このようなリンクです。
https://github.com/octocat/linguist/compare/master...octocat:an-example-comparison-for-docs
リポジトリURLの後に /compare/{変更前}...{変更後} のようなパスを指定することでコミット差分を表示できます。ブランチやコミットハッシュを指定することができます。このフォーマットを覚えることができなかったため、度々 公式ドキュメント を見に行っており、URLをChrome拡張で作ることができたら便利だと思ったのが作ったきっかけです。
目次
利用した技術
- React
- Plasmo
- TailwindCSS
この中でも、初めて挑戦した技術は Plasmo です。Chrome Web Storeへの公開までもフレームワークの中で実現出来ると聞き興味を持っていました。
以下の記事に、Plasmoについてとても丁寧に解説されているので参考になります。
Plasmoについて
Welcome to Plasmo, the all-in-one platform that makes it easy for browser extension developers to create, test, and publish amazing extensions.
ブラウザ拡張機能を簡単に作成、テスト、公開できるプラットフォームだと紹介されています。React以外にも、Vue.jsやSvelte等もサポートしています。
Plasmoのセットアップ
Plasmoのセットアップ方法を記載します。パッケージマネージャーとしてはpnpmが強く推奨されていますが、Voltaでバージョンを管理する都合上、yarnで実施しました。（困ったらpnpmに切り替える予定でした。）
まずはPlasmoのプロジェクトを作成します。対話形式で情報の拡張機能の名前などを記入します。
$ yarn create plasmo yarn create v1.22.19 warning package.json: No license field [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-plasmo@0.83.0" with binaries: - create-plasmo 🟣 Plasmo v0.83.0 🔴 The Browser Extension Framework 🟡 Extension name: github-compare-url-generator 🟡 Extension description: A basic Plasmo extension. 🟡 Author name: Hideki Okawa <h.okawa0303@gmail.com>
developmentサーバーを立ち上げます。
$ yarn dev
このコマンドは、ファイルの変更を監視し build/chrome-mv3-dev の生成を行います。そうすることで、ブラウザに拡張機能を自動で読み込むことができます。
chrome://extensions/ にアクセスし、デベロッパーモードを有効にします。
「パッケージがされていない拡張機能を読み込む」をクリックし、先ほど作成した build/chrome-mv3-dev を選択することで、Chrome上に作成したChrome拡張機能を表示することができます。初期構築のタイミングで、すでに以下のポップアップが出来上がっています。
書いたコード
ここでは、今回の機能を実現するにあたり利用したメソッドを紹介します。
開いているタブのURLを取得する
タブに開いているリポジトリのURLを取得するために chrome.tabs.query を利用しました。
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const repositoryURL = parseGitHubRepositoryURL(tabs[0].url)
setRepositoryURL(repositoryURL)
})
ref: https://developer.chrome.com/docs/extensions/reference/tabs/#method-query
クリップボードにコピーする
生成したURLをクリップボードにコピーするために、navigator.clipboard.writeText を利用しました。
navigator.clipboard.writeText(compareURL)
ref: https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText
別タブで開く
生成したURLを別タブで開くために、 chrome.tabs.create を利用しました。
chrome.tabs.create({ url: compareURL })
ref: https://developer.chrome.com/docs/extensions/reference/tabs/#method-create
最後に
思ったよりもサクサクとChrome拡張を作ることができて感動しました。 これから、開発した拡張の機能の公開の申請もしようと思っているので、公開できたら記事を書こうと思います。
