Chromeの拡張機能を作った

GitHub Actions issue linkというChrome拡張機能を作った。

chrome.google.com

github.com

pushイベントで実行されたGitHub ActionsにはマージされたPRへのリンクはないが、タイトルには「#1234」とPR(Issue)番号があることが多いので、それをPR(Issue)へのリンクに変換する拡張機能。develop→masterへのPRがマージされたタイミングでGitHub Actionsが走った場合などに、ActionsのページからトリガとなったPRへ遷移できる。

手始め

拡張機能の作成にあたって、まずは公式のチュートリアルドキュメントとサンプルを参考にした。

developer.chrome.com

github.com

manifestがV2からV3への移行中なのでサンプルの一部がアーカイブされていたりしたが、JavaScriptで書く分には十分に網羅されていると思う。

最初、content_scriptsでコンテンツを置換していたが、SPAだと置換されないので onUpdated をフックして置換するようにした。

TypeScript

その後、TypeScriptで実装したくなったので調査。ググるとWebpackを使った解説が多かったがそこまで必要性を感じず、vite@latestを使った r7kamuraさんのやり方 を参考にした。@crxjs/vite-plugin は 現在の vite@latest に対応していないので @crxjs/vite-plugin@beta をインストールする必要があるが、それ以外はほぼほぼそのまま。

Chrome Web Storeでの公開

Chrome Web Storeでの公開方法もオフィシャルのドキュメントに概ね従った。

developer.chrome.com

ただ、プライバシーポリシーや住所が必須と書かれているわりに必須でなかったり(素直に住所を登録すると拡張機能のページでインターネット公開されてしまった)、欧州経済領域(EEA)のトレーダー申告が必要だったり、gemやnpmのライブラリを公開するのとは趣が違うことに戸惑った。

結局、

  • プライバシーポリシーのURLはなし
  • 住所は未登録(登録したが削除した)
  • 欧州経済領域(EEA)のトレーダーではない」

として、審査を通した。

審査期間は2〜3日ほど。「host_permissionsを必要としているので時間がかかるかも」とのメッセージが出ていたが意外に時間はかからなかった。

その他

  • 公開にあたってアイコンが必須だったので icooon-mono.com のアイコンを使わせてもらった
    • iconfinderで購入したアイコンは「ロゴへの使用禁止」という項目があり、Chrome Web Storeに表示されるアイコンがロゴにあたるのかよくわからくて利用を避けた
  • プライバシーポリシーが必須だった場合に備えてポリシーを作ってくれるサービスを探した
    • 結局使わなかったが、そのうち使う機会があるかもしれない

termly.io

www.freeprivacypolicy.com