chrome-extension-development

Chrome 拡張機能の開発

このスキルでは、JavaScript/TypeScript、ブラウザー拡張機能 API、最新のウェブ開発手法を網羅した、Chrome 拡張機能の開発に関する専門的なガイダンスを提供します。

ワークフロー：Chrome 拡張機能をゼロから構築する

1. プロジェクトを初期化する — manifest.json、バックグラウンドサービスワーカー、コンテンツスクリプト、ポップアップファイルを含むディレクトリー構成を作成します。
2. マニフェストを設定する — Manifest V3 形式で、権限、コンテンツスクリプトの対象、サービスワーカーの登録、アクションの設定を定義します。
3. バックグラウンドサービスワーカーを実装する — chrome.* API を使用して、拡張機能のライフサイクル、メッセージング、アラームのイベントリスナーを設定します。
4. コンテンツスクリプトを構築する — ウェブページの DOM とやり取りし、chrome.runtime.sendMessage を介してバックグラウンドワーカーと通信し、CSP を遵守するスクリプトを作成します。
5. ポップアップ UI を作成する — ポップアップの HTML/CSS を設計し、バックグラウンドおよびコンテンツスクリプトとのインタラクションを設定します。
6. ストレージと状態管理を追加する — chrome.storage.local または chrome.storage.sync を使用して、ユーザー設定と拡張機能の状態を永続化します。
7. テストとデバッグを行う — chrome://extensions から拡張機能をパッケージ化せずに読み込み、Chrome DevTools でサービスワーカーとコンテンツスクリプトを検査し、単体テストを実行します。
8. パッケージ化して公開する — ストア用のアセット（アイコン、スクリーンショット、説明）を準備し、プライバシーポリシーを作成して、Chrome ウェブストアに提出します。

例：最小限の Manifest V3 設定

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A sample Chrome extension using Manifest V3",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content/content-script.js"],
      "css": ["content/styles.css"]
    }
  ]
}

例：メッセージング機能を備えたバックグラウンドサービスワーカー

// background/service-worker.ts

// Listen for extension install or update
chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    chrome.storage.local.set({ initialized: true, count: 0 });
    console.log('Extension installed');
  }
});

// Handle messages from content scripts or popup
chrome.runtime.onMessage.addListener(
  (message: { type: string; payload?: unknown }, sender, sendResponse) => {
    if (message.type === 'GET_COUNT') {
      chrome.storage.local.get('count', (result) => {
        sendResponse({ count: result.count ?? 0 });
      });
      return true; // keep message channel open for async response
    }

    if (message.type === 'INCREMENT') {
      chrome.storage.local.get('count', (result) => {
        const newCount = (result.count ?? 0) + 1;
        chrome.storage.local.set({ count: newCount }, () => {
          sendResponse({ count: newCount });
        });
      });
      return true;
    }
  }
);

// Schedule periodic tasks with chrome.alarms
chrome.alarms.create('sync-data', { periodInMinutes: 30 });
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'sync-data') {
    console.log('Running scheduled sync');
  }
});

コードのスタイルと構成

• 適切な型定義を備えた、明確でモジュール化された TypeScript コードを記述します。
• 関数型プログラミングのパターンに従い、クラスは避けます。
• 説明的な変数名を使用します（例：isLoading、hasPermission）。
• ファイルを論理的に構成します：ポップアップ、バックグラウンド、コンテンツスクリプト、ユーティリティ。
• 適切なエラー処理とログ記録を実装します。
• JSDoc コメントでコードをドキュメント化します。

アーキテクチャとベストプラクティス

• Manifest V3 の仕様を厳守します。
• バックグラウンド、コンテンツスクリプト、ポップアップの間で責務を分割します。
• 最小権限の原則に従って権限を設定します。
• 開発には最新のビルドツール（webpack/vite）を使用します。
• 適切なバージョン管理と変更管理を実装します。

Chrome API の使用

• chrome.* API（storage、tabs、runtime など）を正しく使用します。
• Promise で非同期処理を扱います。
• バックグラウンドスクリプトには Service Worker を使用します（MV3 の要件）。
• スケジュールされたタスクには chrome.alarms を実装します。
• ブラウザーアクションには chrome.action API を使用します。
• オフライン機能を適切に処理します。

セキュリティとプライバシー

• コンテンツセキュリティポリシー（CSP）を実装します。
• ユーザーデータを安全に扱います。
• XSS やインジェクション攻撃を防ぎます。
• コンポーネント間のセキュアなメッセージングを使用します。
• クロスオリジンリクエストを安全に処理します。
• 安全なデータ暗号化を実装します。
• web_accessible_resources のベストプラクティスに従います。

パフォーマンスと最適化

• リソース使用量を最小限に抑え、メモリーリークを防ぎます。
• バックグラウンドスクリプトのパフォーマンスを最適化します。
• 適切なキャッシュ機構を実装します。
• 非同期処理を効率的に扱います。
• CPU とメモリーの使用量を監視し、最適化します。

UI とユーザーエクスペリエンス

• マテリアルデザインのガイドラインに従います。
• レスポンシブなポップアップウィンドウを実装します。
• ユーザーに明確なフィードバックを提供します。
• キーボード操作に対応します。
• 適切な読み込み状態を確保します。
• 適切なアニメーションを追加します。

国際化

• 翻訳には chrome.i18n API を使用します。
• _locales の構成に従います。
• RTL 言語に対応します。
• 地域ごとの書式を扱います。

アクセシビリティ

• ARIA ラベルを実装します。
• 十分な色のコントラストを確保します。
• スクリーンリーダーに対応します。
• キーボードショートカットを追加します。

テストとデバッグ

• Chrome DevTools を効果的に使用します。
• 単体テストと統合テストを作成します。
• クロスブラウザー互換性をテストします。
• パフォーマンス指標を監視します。
• エラーシナリオに対処します。

公開とメンテナンス

• ストア掲載情報とスクリーンショットを準備します。
• 明確なプライバシーポリシーを作成します。
• 更新機構を実装します。
• ユーザーからのフィードバックに対応します。
• ドキュメントを保守します。

公式ドキュメントに従う

• Chrome Extension のドキュメントを参照してください
• Manifest V3 の変更を常に把握してください
• Chrome ウェブストアのガイドラインに従ってください
• Chrome プラットフォームの更新を監視してください

出力に関する期待事項

• 明確で動作するコード例を提示してください
• 必要なエラー処理を含めてください
• セキュリティのベストプラクティスに従ってください
• ブラウザー間の互換性を確保してください
• 保守性と拡張性の高いコードを作成してください