title | emoji | type | topics | published | |||||
---|---|---|---|---|---|---|---|---|---|
Next.js, TypeScript, Tailwind CSS で快適に始める(かもしれない)Chrome拡張機能開発 |
🔌 |
tech |
|
true |
こんにちは。実務が始まって 3 週間ほどのまよねーづです。 みなさんは Chrome 拡張機能の開発をしたことがありますか?
自分は過去に 1 度つくったことがあるのですが、素の HTML / CSS / JS
のみで開発したり、海外の方の React / TypeScript
のテンプレートをクローンして、CSS Modules
を使って開発することしかありませんでした。
せっかくだし Chrome 拡張も自分の好きな技術を使いたいなと思い、下記スタックで今回挑戦して作ってみました。
- Next.js
- TypeScript
- Tailwind CSS
今回は上記スタックで Chrome 拡張機能を作り、その副産物としてテンプレートリポジトリを作成したので、それの紹介記事です。
手軽に Chrome 拡張を作りたい人は、是非今回紹介する ↓ のテンプレートリポジトリをご活用ください。
https://github.com/mayone-du/chrome-extension-template-with-nextjs
:::message 最低限の使い方は README にも書いてあるので、こちらの記事は読み飛ばしてもらっても使用できると思います。 :::
- 今回使う技術の基礎知識
- Chrome 拡張機能についての基礎知識(manifest や ChromeAPI など)
Chrome 拡張についての基礎知識は、既にわかりやすい記事があるのでそちらを参考にしてください。
- https://www.tackn.jp/post-3806.html
- https://roy29fuku.com/web/browser/google-chrome-extension-tutorial/
https://developer.chrome.com/docs/extensions/reference/ https://support.google.com/chrome/a/answer/2714278?hl=ja
:::message alert 1 つ注意点として、manifest v2 と v3 で大きく変わる箇所があるので、そこだけ注意しながら開発してください。今回は v3 で作成しています。 :::
テンプレートリポジトリの使い方
README にも記載してますが、ここでも説明します。
- ビルドは、
npm run export
で/extensions
以下に出力されます。Chrome 側で拡張機能を読み込む際は/extensions
を選択してください。 /src/scripts
以下の 2 種類のファイルが、それぞれ Chrome 拡張用のスクリプトファイルです。(content.js
|background.js
)- ChromeAPI を使用する場合は、コンポーネント化して
dynamic import
で読み込み、ssr: false
にするようにしてください。そうしないとビルド時にchrome
が未定義だと怒られビルドできません。 - 自分で webpack の設定を書いて Chrome 用のスクリプトをバンドルしています。ここらへんのパスやフォルダ構成等をいじる際は、
/webpack
の設定も見直してください。 - 適宜
manifest.json
や linter, formatter の設定を変えてください。 - ページ遷移は普通に Next.js のルーティングに従います。
実は、このリポジトリは大きな欠点があり、ChromeAPI を使う場合、開発中の動作確認方法が今の所(2021/11/23 日現在)毎回ビルド(npm run export)するしかなく、効率が悪いです。タイトル詐欺ってごめんなさい。
理由としては ChromeAPI が window オブジェクトに存在しないためなので、ローカルの場合は ChromeAPI を使わずにうまいことやれば出来なくはないです。
:::message
ChromeAPI を使用しない場合であれば、普通にnpm run dev
で確認できます
:::
もし本格的に Chrome 拡張の開発をしたことがある人や、なにか良い方法があれば是非コメントや PR 等いただけると嬉しいです 🙏
https://github.com/mayone-du/chrome-extension-template-with-nextjs/
- https://qiita.com/yushimatenjin/items/8f476dd018550922f1e9
- https://zenn.dev/cti1650/articles/81016618ec5a87
/extensions
が拡張機能のディレクトリになる/src/scripts
が Chrome 用のスクリプトファイルになる- Chrome 用のスクリプトファイルと通信したい場合は、
dyamic import
を使ってコンポーネント側でsendMessage
などする。 - 動作確認方法や、ディレクトリ構造の変更に注意。
Chrome 拡張は作れるとなにかと便利だし、できることの幅も広がって楽しいので、ぜひ今回紹介したテンプレートを使用して Chrome 拡張の開発に挑戦してもらえればと思います!
https://github.com/mayone-du/chrome-extension-template-with-nextjs
今回のテンプレート自体にもまだまだ改善の余地はあると思うので、気が向き次第改善し続けます。
最後までご覧頂きありがとうございました 🙏 コメントやご指摘等も大歓迎ですので、是非ご提案、ご意見をお待ちしております。