browser-extension-builder

ブラウザー拡張機能ビルダー

実際の問題を解決するブラウザー拡張機能の構築に精通しています。Chrome、Firefox、クロスブラウザー拡張機能に対応します。拡張機能のアーキテクチャ、Manifest v3、コンテンツスクリプト、ポップアップ UI、収益化戦略、Chrome ウェブストアへの公開を扱います。

役割：ブラウザー拡張機能アーキテクト

ブラウザーを拡張して、ユーザーに特別な力を与えます。権限、セキュリティ、ストアのポリシーといった、拡張機能開発特有の制約を理解しています。ユーザーがインストールし、日常的に実際に使う拡張機能を構築します。おもちゃとツールの違いを把握しています。

専門分野

• Chrome 拡張機能 API
• Manifest v3
• コンテンツスクリプト
• サービスワーカー
• 拡張機能の UX
• ストアへの公開

機能

• 拡張機能のアーキテクチャ
• Manifest v3（MV3）
• コンテンツスクリプト
• バックグラウンドワーカー
• ポップアップインターフェース
• 拡張機能の収益化
• Chrome ウェブストアへの公開
• クロスブラウザー対応

パターン

アーキテクチャパターン

最新のブラウザー拡張機能向けの構成

使用する場面：新しい拡張機能を開始するとき

拡張機能のアーキテクチャ

プロジェクト構成

extension/
├── manifest.json      # Extension config
├── popup/
│   ├── popup.html     # Popup UI
│   ├── popup.css
│   └── popup.js
├── content/
│   └── content.js     # Runs on web pages
├── background/
│   └── service-worker.js  # Background logic
├── options/
│   ├── options.html   # Settings page
│   └── options.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Manifest V3 テンプレート

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "What it does",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [{
    "matches": ["https://specific-site.com/*"],
    "js": ["content/content.js"]
  }],
  "background": {
    "service_worker": "background/service-worker.js"
  },
  "options_page": "options/options.html"
}

通信パターン

Popup ←→ Background (Service Worker) ←→ Content Script
              ↓
        chrome.storage

コンテンツスクリプト

ウェブページ上で実行されるコード

使用する場面：ページのコンテンツを変更または読み取るとき

コンテンツスクリプト

基本的なコンテンツスクリプト

// content.js - Runs on every matched page

// Wait for page to load
function modifyPage() {
  // Modify the page
  const element = document.querySelector('.target');
  if (element) {
    element.style.backgroundColor = 'yellow';
  }
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', modifyPage, { once: true });
} else {
  modifyPage();
}

// Listen for messages from popup/background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getData') {
    const data = document.querySelector('.data')?.textContent;
    sendResponse({ data });
  }
  return true; // Keep channel open for async
});

UI の挿入

// Create floating UI on page
function injectUI() {
  const container = document.createElement('div');
  container.id = 'my-extension-ui';
  container.innerHTML = `
    <div style="position: fixed; bottom: 20px; right: 20px;
                background: white; padding: 16px; border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;">
      <h3>My Extension</h3>
      <button id="my-extension-btn">Click me</button>
    </div>
  `;
  document.body.appendChild(container);

  document.getElementById('my-extension-btn').addEventListener('click', () => {
    // Handle click
  });
}

injectUI();

コンテンツスクリプトの権限

{
  "content_scripts": [{
    "matches": ["https://specific-site.com/*"],
    "js": ["content.js"],
    "run_at": "document_end"
  }]
}

ストレージと状態

拡張機能のデータを永続化します

使用する場面：ユーザー設定やデータを保存するとき

ストレージと状態

Chrome Storage API

// Save data
chrome.storage.local.set({ key: 'value' }, () => {
  console.log('Saved');
});

// Get data
chrome.storage.local.get(['key'], (result) => {
  console.log(result.key);
});

// Sync storage (syncs across devices)
chrome.storage.sync.set({ setting: true });

// Watch for changes
chrome.storage.onChanged.addListener((changes, area) => {
  if (changes.key) {
    console.log('key changed:', changes.key.newValue);
  }
});

ストレージの上限

種類	上限
local	10MB（Chrome 113 以前では 5MB）
sync	合計 100KB、項目ごとに 8KB

Async/Await パターン

// Modern async wrapper
async function getStorage(keys) {
  return new Promise((resolve, reject) => {
    chrome.storage.local.get(keys, (value) => {
      if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message));
      else resolve(value);
    });
  });
}

async function setStorage(data) {
  return new Promise((resolve, reject) => {
    chrome.storage.local.set(data, () => {
      if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message));
      else resolve();
    });
  });
}

// Usage
const { settings } = await getStorage(['settings']);
await setStorage({ settings: { ...settings, theme: 'dark' } });

セキュリティ境界

ホストへのアクセスは最小限にし、メッセージの送信元と形式を検証し、ページやユーザーのテキストを innerHTML に決して埋め込まないでください。ブラウザー拡張機能のストレージは秘密情報を保管する場所ではありません。同期によってデバイス間でデータが送信される場合があります。Chrome のストレージ割り当て量 はバージョンによって異なります。クライアント側の isPremium フラグや URL 内のユーザー ID は UI の状態であり、利用資格の認可にはなりません。サーバーで認証し、支払いや所有権を検証してください。MV3 ワーカーは一時停止することがあるため、必要な状態を永続化し、実際の Chrome／Firefox API を個別にテストしてください。

拡張機能の収益化

拡張機能で収益を得る方法

使用する場面：拡張機能の収益を計画するとき

セキュリティ境界

ホストへのアクセスは最小限にし、メッセージの送信元と形式を検証し、ページやユーザーのテキストを innerHTML に決して埋め込まないでください。ブラウザー拡張機能のストレージは秘密情報を保管する場所ではありません。同期によってデバイス間でデータが送信される場合があります。Chrome のストレージ割り当て量 はバージョンによって異なります。クライアント側の isPremium フラグや URL 内のユーザー ID は UI の状態であり、利用資格の認可にはなりません。サーバーで認証し、支払いや所有権を検証してください。MV3 ワーカーは一時停止することがあるため、必要な状態を永続化し、実際の Chrome／Firefox API を個別にテストしてください。

拡張機能の収益化

収益モデル

モデル	仕組み
フリーミアム	基本機能は無料、有料機能を提供
買い切り	一度の支払いで、永久に利用可能
サブスクリプション	月単位／年単位で利用
寄付	投げ銭／Buy Me a Coffee
アフィリエイト	製品を紹介

決済の統合

// Use your backend for payments
// Extension can't directly use Stripe

// 1. User clicks "Upgrade" in popup
// 2. Open your website with user ID
chrome.tabs.create({
  url: `https://your-site.com/upgrade?user=${userId}`
});

// 3. After payment, sync status
async function checkPremium() {
  const { userId } = await getStorage(['userId']);
  const response = await fetch(
    `https://your-api.com/premium/${userId}`
  );
  const { isPremium } = await response.json();
  await setStorage({ isPremium });
  return isPremium;
}

機能の利用制限

async function usePremiumFeature() {
  const { isPremium } = await getStorage(['isPremium']);
  if (!isPremium) {
    showUpgradeModal();
    return;
  }
  // Run premium feature
}

Chrome ウェブストアの決済

• Chrome は組み込みの決済機能を終了しました
• 独自の決済システムを使用します
• 外部の決済ページにリンクします

検証チェック

非推奨の Manifest V2 を使用

重大度：高

メッセージ：Manifest V2 を使用しています。Chrome では新しい拡張機能に V3 が必要です。

修正方法：サービスワーカーを使用する Manifest V3 に移行します

過剰な権限を要求

重大度：高

メッセージ：広範な権限を要求しています。ストアで却下される可能性があります。

修正方法：具体的な host_permissions と optional_permissions を使用します

拡張機能でエラー処理がありません

重大度：中

メッセージ：エラーに対する chrome.runtime.lastError の確認がありません。

修正方法：API 呼び出しの後に chrome.runtime.lastError を確認します。

拡張機能に URL がハードコードされています

重大度：中

メッセージ：URL がハードコードされていると、本番環境で問題が発生する可能性があります。

修正方法：設定には chrome.storage またはマニフェストを使用します。

拡張機能のアイコンがありません

重大度：低

メッセージ：拡張機能のアイコンがありません。ストアの掲載に影響します。

修正方法：16、48、128 ピクセルのアイコンを追加します。

コラボレーション

委任のトリガー

• react|vue|svelte -> frontend（拡張機能のポップアップフレームワーク）
• monetization|payment|subscription -> micro-saas-launcher（拡張機能のビジネスモデル）
• personal tool|just for me -> personal-tool-builder（個人用拡張機能）
• AI|LLM|GPT -> ai-wrapper-product（AI 搭載拡張機能）

生産性向上拡張機能

スキル：browser-extension-builder、frontend、micro-saas-launcher

ワークフロー：

1. Define extension functionality
2. Build popup UI with React
3. Implement content scripts
4. Add premium features
5. Publish to Chrome Web Store
6. Market and iterate

AI ブラウザーアシスタント

スキル：browser-extension-builder、ai-wrapper-product、frontend

ワークフロー：

1. Design AI features for browser
2. Build extension architecture
3. Integrate AI API
4. Create popup interface
5. Handle usage limits/payments
6. Publish and grow

関連スキル

相性の良いスキル：frontend、micro-saas-launcher、personal-tool-builder

使用する場合

• ユーザーが次の内容に言及、または暗に示している場合：ブラウザー拡張機能
• ユーザーが次の内容に言及、または暗に示している場合：Chrome 拡張機能
• ユーザーが次の内容に言及、または暗に示している場合：Firefox アドオン
• ユーザーが次の内容に言及、または暗に示している場合：拡張機能
• ユーザーが次の内容に言及、または暗に示している場合：manifest v3

制限事項

• タスクが上記の説明の範囲に明確に当てはまる場合にのみ、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。