最近、Chrome拡張機能を触る機会があったので、基本的な概念から、開発で参考になったリソース、感じたことまでを軽くまとめてみました。
例として、Amazonの商品分析ツール「SellerSprite」という実例を参考にしています。
なぜChrome拡張機能を始めたのか？
きっかけは業務ではあるんですが、
ある特定のWebサイト（たとえばAmazonなど）の情報を効率的に扱いたい場面が増えたことです。
拡張機能は、特定のドメインに対してピンポイントで強く作用できるのが大きな魅力です。
ページの構造がわかっていれば、カスタムDOMを差し込んだり、API連携したりと柔軟に拡張できるため、0からWebアプリを作るよりも効率的で、かつ機能性や拡張性にも優れていると感じました。
特にBtoBでPCを使う、かつ特定のドメインを使うニッチな業務にはすごく刺さると個人的には考えています。
拡張機能の構成要素
Chrome拡張機能は、以下の3つの主要コンポーネントで構成されています。
- Manifestファイル
- Content scripts
- Service Worker
Manifestファイル
拡張機能全体の定義を記述するファイル（manifest.json）。
Chromeはこのファイルを読み、どのファイルを読み込むか判断します。
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"permissions": ["activeTab"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://www.amazon.co.jp/*"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}
Content scripts
拡張機能のフロントエンド部分。
既存のWebページのDOMに対して操作を行うJSがここです。
Amazonの商品ページなどでDOMに直接情報を差し込むことが可能です。
例：SellerSpriteのように、Amazonの商品詳細ページにカスタム情報を差し込む
また、画面右上の拡張機能アイコンを押すと、ポップアップ（UI）が表示されます。
（Next.jsで言うところの pages/ や components/ のような役割）
Service Worker（旧 background.js）
拡張機能のバックエンド部分。
DOMにはアクセスできませんが、イベントハンドリングやAPI通信などが可能です。
主に以下のような用途で使われます：
APIとの通信
スケジュール処理
ユーザー操作のトラッキング
Chrome拡張のIDは固定され、以下のような形式で確認可能です：
chrome://extensions/?id=◯◯◯◯
（Next.jsでいう api/ ディレクトリ的な役割）
chrome://extensions/ は拡張機能の管理画面であり、実はこれ自体が1つの特殊なブラウザページです。
開発者ツール（DevTools）を開くと、Network や Application タブが使え、拡張機能専用の保存領域「Extension Storage（拡張機能ストレージ）」も確認できます。
これにより、拡張機能がユーザー情報や設定をブラウザに保存・管理できる仕組みが提供されています。
Service Workerをクリックすると、
DevToolが出てきます
フレームワーク選定
今回は以下の理由でReact + Viteのテンプレートを使いました。
- React・TS・Tailwindがつかえること
- ホットリロード対応（ビルド不要で即時反映）
- 初心者でも分かりやすい構造
- GitHubで高評価（スター数が多い）
使ったテンプレートはこちら：
Iframeからの脱却を目指して
以前はiframeを使って、外部ページにフレームを読み込んで機能を実装していました。
✅ メリット：ストアに出さなくてもすぐ修正できる
❌ デメリット：読み込みが重く、ユーザー体験が悪い
現在はContent Scriptを用いて直接DOMに差し込む方式に変更し、UXを改善しています。
感想
Chrome拡張機能は、通常のWeb開発とは少し違った概念があり、とても新鮮でした。
「ポップアップUI」「既存ページへのDOM差し込み」「バックグラウンド通信」など、SPAとは異なるアーキテクチャを楽しめるのが面白いところです。
参考資料