ブラウザ拡張機能の開発を始める方法

Sep 30, 2024

ブラウザ拡張機能の開発はフロントエンド技術を使用しますが、API や動作方法はウェブページとは異なるため、開発フレームワークを使用することで効率を大幅に向上させることができます。ブラウザ拡張機能の開発はウェブやアプリの開発と比較するとまだニッチな分野で、開発者コミュニティは明らかに活発ではありません。幸いなことに、必要な開発ツールはすべて揃っています。以下に私が使用したものをまとめます。

現在、主要なブラウザはすべて拡張機能開発の統一標準である manifest v3 に従っているため、開発プロセスと技術スタックは似ています。細部に違いがあるかもしれませんが、私が遭遇した部分は注記します。

開発フレームワーク

適切な開発フレームワークは、少なくともリポジトリ構造の確立、ホットリロードデバッグのサポート、ブラウザ拡張機能インターフェースの型ヒントのサポートなどを提供する必要があります。以下の技術スタックから 1 つを選択できます。

コードリポジトリテンプレート

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

正確には、これはフレームワークではなくテンプレートです。開発フレームワークが持つべき機能をすべて含んでいます。インターフェースがそれほど複雑ではないブラウザ拡張機能の開発では、実装の詳細を隠すフレームワークよりも、すべての詳細を表示するリポジトリテンプレートの方が個人的に好みです。

HMR、sourcemap などをサポート
pnpm + turbo を使用して monorepo を管理
タブのホームページ、DevTools、サイドバーなど、Chrome 拡張機能のすべての機能の実装を提供し、参照や置き換えが容易
Chrome、Firefox、その他の主要ブラウザ向けのパッケージング。Firefox のデフォルト互換性
隠された詳細はなく、すべてのコードが表示され、理解と修正が容易

Plasmo

上記のテンプレートが気に入らない場合は、Plasmoフレームワークを検討できます

React、Vue、Angular などの主流フレームワークをサポート
HMR などのデバッグ機能をサポート
バンドリングに Parcel を使用（vite ではない）
一部の詳細（マニフェスト生成、コンテンツ UI レンダリングプロセスなど）がカプセル化されており、理解が難しい

デバッグ

拡張機能の読み込み
- リポジトリでnpm devを実行
- Chrome で拡張機能を開く：chrome://extensions/
- 「デベロッパーモード」を有効にする -> 「パッケージ化されていない拡張機能を読み込む」をクリック -> コンパイルされた出力フォルダを選択
デバッグは Chrome DevTools を通じて実装
- コンテンツスクリプト：「ソース」タブで「Content Scripts」を選択してコードをデバッグ
- バックグラウンドスクリプトはサービスワーカーで実行されるため、chrome://extensions/を開く -> 拡張機能を見つける -> サービスワーカーをクリックしてコードをデバッグ