拡張機能開発メモ

はじめに

拡張機能開発の際の自分のためのメモです。

環境構築

1．以下のテンプレートを使用する

GitHub

GitHub – Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React… Chrome Extension Boilerplate with React + Vite + Typescript – Jonghakseo/chrome-extension-boilerplate-react-vite

このテンプレートの特徴

• ホットリロードに対応している
• React と TypeScript を使用している
• 継続的にメンテナンスされている

2. 以下のコマンドでパッケージをインストール

pnpm install
pnpm dev

chrome://extensions/にアクセスし、「パッケージ化されていない拡張機能を読み込む」から「dist」を追加する。

追加された「Chrome extension boilerplate」をオンにして、新しいタブを開く。

ブラウザに表示されてばOK！

プロジェクト全体構造

chrome-extension-boilerplate-react-vite/
├── chrome-extension/     # 拡張機能のコア部分
├── pages/               # UI ページ群
├── packages/            # 共有パッケージ群
├── tests/              # テストコード
├── dist/               # ビルド出力ディレクトリ
└── bash-scripts/       # ビルド用スクリプト

主要ディレクトリの詳細

1. /chrome-extension – 拡張機能のコア

役割: Chrome拡張機能の中核となるマニフェストとバックグラウンドスクリプト

chrome-extension/
├── manifest.ts         # マニフェストファイル（動的生成）
├── src/
│   └── background/    
│       └── index.ts    # バックグラウンドスクリプト（拡張機能の裏側で動作）
└── public/
    ├── icon-*.png      # 拡張機能のアイコン
    └── content.css     # コンテンツスクリプト用CSS

主な機能:

• 拡張機能の設定（権限、アイコン、スクリプト等）を定義
• バックグラウンドでの処理（API通信、ストレージ管理など）
• 拡張機能のエントリーポイント

2. /pages – UI ページ群

各ディレクトリが拡張機能の異なるUIパートを担当しています：

/pages/popup – ツールバーポップアップ

役割: ツールバーアイコンをクリックした時に表示される小窓

• ユーザーがすぐアクセスできる主要機能を配置
• Popup.tsx: メインコンポーネント

/pages/options – 設定ページ

役割: 拡張機能の詳細設定画面

• chrome://extensions から開く設定ページ
• Options.tsx: 設定画面のメインコンポーネント

/pages/content – コンテンツスクリプト

役割: Webページに直接注入されるスクリプト

• Webページの DOM を操作
• ページの情報を読み取り・変更
• index.ts: エントリーポイント

/pages/content-ui – コンテンツUI

役割: Webページ内に React コンポーネントを表示

• content スクリプトから呼び出される React UI
• Shadow DOM を使用してスタイルを隔離

/pages/content-runtime – コンテンツランタイム

役割: content-ui の実行環境を提供

• React コンポーネントの実行環境設定

/pages/new-tab – 新規タブページ

役割: Chrome の新規タブを置き換える

• カスタム新規タブページの実装

/pages/side-panel – サイドパネル

役割: Chrome 114+ のサイドパネル機能

• ブラウザの横に常駐するパネル

/pages/devtools & /pages/devtools-panel – 開発者ツール

役割: Chrome DevTools への統合

• 開発者ツールにカスタムパネルを追加

3. /packages – 共有パッケージ群

モノレポ構造で管理される共有モジュール：

主要パッケージ

4. /tests – テスト

tests/
└── e2e/                # End-to-End テスト
    ├── specs/          # テストケース
    └── config/         # WebDriverIO設定

5. その他の重要ファイル

各ページの使い分け

chromeオブジェクト

Chrome拡張機能開発において、すべての機能の入口になる「中核オブジェクト」。

Chromeの拡張機能API（Chrome Extensions API）にアクセスするためのグローバルオブジェクトです。

具体的にできること（一部）

例：実際の使い方

chrome.runtime.onInstalled.addListener(() => {
  console.log('拡張機能がインストールされました');
});

chrome.storage.sync.get(['showIcon']).then(result => {
  console.log('保存された設定:', result.showIcon);
});

注意：使える場所に制限あり

• chrome.tabs → content script では使えない
• chrome.runtime → ほぼどこでも使える（popup / background / content）
• chrome.storage → どこでも使える（ただし権限が必要）

セキュリティと権限

chrome APIを使うには、manifest.json に明示的に書く必要があります（例：permissions, host_permissions）

"permissions": ["storage", "contextMenus", "tabs"]

ストレージ

設定を別のPC（タブ）でも共有したいなら storage.sync、そうじゃないなら storage.local。