2022年05月18日

Chrome拡張をつくるチュートリアル

copy-markdown-linkという素朴なChrome拡張のコミットログを追いかけて、Chrome拡張のつくりかたを学ぼう。

つくるもの

拡張のアイコンをクリックするかショートカットキーを押すと、Markdown形式でリンクをコピーする、という拡張をつくる。

念のため、Node.jsのバージョンを確認しておこう。Node.js 18.0.0を使っているが、もう少し古くても多分大丈夫。

$ node -v
v18.0.0
$ npm -v
8.6.0

npm init vite@latest で雛形をつくる。

npm init vite@latest
cd copy-markdown-link

雛形生成時に幾つか質問されるので、次のように入力した。React等は不要で、TypeScriptで書く。

Project name: copy-markdown-link
Select a framework: vanilla
Select a variant: vanilla-ts

npm install でpackage-lock.jsonをつくってcommitしておく。

npm install

Vite向けのChrome拡張用プラグインを入れる。これがあると、manifest.jsonを元に良い感じにViteを設定してくれる。具体的には、どのファイルをどうコンパイルすべきかを、manifest.jsonの内容から推測してくれる。

npm install --save-dev @crxjs/vite-plugin

manifest.jsonを書く。

アイコンを押すか Ctrl+M を押すとポップアップを開くようにしてもらう。また、必要な権限を定義しておく。現在開いているタブのURLとタイトルを取得するために activeTab を、でクリップボードに書き込むために clipboardWrite を使う。

更に、Viteの設定ファイルを用意して、さっき入れたプラグインの設定もする。

この時点で、npm run dev または npm run build を実行して ./dist ディレクトリを拡張として読み込ませると、拡張が動くようになる。ソースコードを変更したらビルドして再読み込みのボタンを押す必要がある。

拡張のアイコンを押すとポップアップが表示される。

ポップアップ時に表示されるHTMLの内容を、デフォルトのものから変更する。"Copied" と表示して、src/main.tsを読み込むだけ。

シンプルになった。

TypeScriptでChrome拡張のAPIを利用するとき、これが無いと怒られが発生するので、chrome オブジェクト関係の諸々の型定義を追加しておく。

npm install --save-dev @types/chrome

現在開かれているタブのURLとタイトルをMarkdownのリンク形式でコピーする、というコードを書く。

Chrome拡張が欲しがりそうなアイコン画像を用意する。アイコンはimagemagickで機械的に生成することに。

ビルドして再読み込みさせると、拡張のアイコンが変わる。

これで完成。おつかれさまでした。

今後の開発の参考になりそうページへのリンクを掲載しておく。