Chrome拡張機能を作ってストアに掲載してみた
技術・テクノロジーChrome拡張 つくりかた 令和最新版 あたりの記事を読んで、Chrome の拡張機能を作ってみることにしました。
作った拡張機能は、ページのタイトルと URL をコピーするためのシンプルなものです。初期設定では Ctrl + Shift + c と Ctrl + Shift + m のショートカットで動作します。
拡張機能を作ろうと思ったきっかけ
自分はこれまで タイトル (スペース) URL という形式でのコピーと、Markdown 形式でのコピーをするために以下の 2 つの拡張機能を使っていました。
自分がやりたいことは、この 2 つの拡張機能を入れれば解決します。
しかし、そのためだけに 2 つの拡張機能を入れる必要は無いんじゃないか？と思って、今回自分で作ってみることにしました（おそらく、探せば似たようなことができる拡張機能は見つかる気がしつつも）。
拡張機能の作り方
実際の作成手順はほぼ Learn Chrome拡張 in Y minutes の通りです。
ただ、自分が作りたい拡張機能は 2 つのショートカットを割り振る必要がありました。
- Ctrl + Shift + c
- Title (スペース) URL のコピー
- Ctrl + Shift + m
- Markdown のコピー
そのため、バックグラウンドからchrome.scripting.executeScriptを呼び出しています。詳細が気になる方はコードを見てみてください。
copy-page-link/background.ts at 5f9183fa66220d471201ae0c68ace7b1590007ee · y-temp4/copy-page-link
画像の用意
Chrome 拡張のアイコンを用意します。「Learn Chrome拡張 in Y minutes」を真似て imagemagick を使おうかと思いましたが、何となく Node.js で実装したくなったので sharp を使って生成しています。
copy-page-link/generate.ts at 5f9183fa66220d471201ae0c68ace7b1590007ee · y-temp4/copy-page-link
なお、拡張機能のトップに表示されるスクリーンショットは Keynote で雑に作りました。あまりにも雑なのでもうちょっとなんとかしたい。
拡張機能の申請
作った拡張機能を Chrome のストアに載せるためには、以下のページからデベロッパーの登録が必要です。
これ、知らなかったのですが、地味に契約料として 5 ドルかかります。無料で掲載できないため、注意しましょう。
登録後は作った拡張機能を Zip でアップロードし、必要な情報を埋めていきます。割と最小限でも審査には進めます。
必要事項を埋めた後に審査に申し込みます。ざっくりですが、自分の場合は数日で審査に通りました。
地味にハマったこと
今回作った拡張機能は、Chrome 側の制約？で Chrome の設定画面の Chrome のウェブストア上では動作しません。Chrome のウェブストア上で動作しないのは場合によっては地味に困りますね。今回は以下のような感じで雑に条件分岐を追加しています。
copy-page-link/background.ts at 5f9183fa66220d471201ae0c68ace7b1590007ee · y-temp4/copy-page-link
あと、調べた結果出てくる情報が Manifest V2 か V3 かは結構意識する必要があるかなと思いました。
参考：Migrating to Manifest V3 - Chrome Developers
おわりに
Chrome の拡張機能はまともに作ったことがありませんでしたが、いざ作ってみるとハマりポイントはちょいちょいありつつも楽しく作れました。
今後も機会があれば、もう少し凝った感じのものを作ってみたいですね。
