Back

初めてのFirefox拡張機能の構築方法

OpenReplay Team OpenReplay Team

Nov 14, 2025 · 3 min read

初めてのFirefox拡張機能の構築方法

Firefox拡張機能の構築は難しそうに思えるかもしれませんが、Manifest V3と最新のWebExtensions APIを使えば、10分以内に最初の動作する拡張機能を作成できます。このFirefox拡張機能チュートリアルでは、Webページを変更し、ポップアップインターフェースを含む機能的なMV3拡張機能の作成手順を説明します。

重要なポイント

  • Manifest V3を使用して10分以内に動作するFirefox拡張機能を作成
  • 分離されたコンテキストでWebページを安全に変更するコンテンツスクリプトを構築
  • メッセージパッシングを使用したユーザーインタラクション用のポップアップインターフェースを実装
  • 最小限の権限と外部スクリプトでセキュリティのベストプラクティスに従う

WebExtensionsとは?なぜManifest V3なのか?

WebExtensionsは、標準的なWeb技術(HTML、CSS、JavaScript)で構築されたクロスブラウザ互換のアドオンです。Firefox WebExtensions Manifest V3は、拡張機能開発の現在の標準を表しており、サービスワーカーによる改善されたセキュリティ、宣言的APIによる優れたパフォーマンス、そしてより強力なクロスブラウザ互換性を提供します。

FirefoxはまだManifest V2をサポートしていますが、Manifest V3から始めることで、将来のブラウザアップデートとの互換性を確保し、Chrome、Edge、Safariの拡張機能アーキテクチャと整合性を保つことができます。このガイドでは、MV3のベストプラクティスに専念します。

Firefox拡張機能プロジェクト構造のセットアップ

最初のFirefox拡張機能を段階的に構築しましょう。my-first-extensionという新しいフォルダを作成し、以下の必須ファイルを追加します:

Manifest V3設定の作成

manifest.jsonファイルは、すべての拡張機能の中核です。以下のManifest V3設定でこのファイルを作成します:

{
  "manifest_version": 3,
  "name": "My Page Enhancer",
  "version": "1.0.0",
  "description": "Enhances web pages with custom styling",
  
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "48": "icon.png"
    }
  },
  
  "content_scripts": [
    {
      "matches": ["*://*.example.com/*"],
      "js": ["content.js"]
    }
  ],
  
  "icons": {
    "48": "icon.png"
  }
}

非推奨の"browser_action"の代わりに"action"を使用していることに注意してください。これはFirefox MV3の重要な要件です。マニフェストは最小権限の原則に従っており、Firefox拡張機能のベストプラクティスの核心です。

ページ変更用のコンテンツスクリプトの構築

MV3コンテンツスクリプトは分離されたコンテキストで実行され、悪意のあるページスクリプトから拡張機能コードを保護します。content.jsを作成します:

// content.js - Runs on matching pages
console.log('Extension loaded on:', window.location.href);

// Add a subtle border to all paragraphs
document.querySelectorAll('p').forEach(paragraph => {
  paragraph.style.border = '2px solid #4A90E2';
  paragraph.style.padding = '8px';
  paragraph.style.borderRadius = '4px';
});

// Listen for messages from the popup
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'changeColor') {
    document.body.style.backgroundColor = request.color;
  }
});

これは、Manifest V3が拡張機能コードをページコンテキストから分離し、古い拡張機能アーキテクチャで一般的だったセキュリティ脆弱性を防ぐ方法を示しています。

Firefoxアクションポップアップインターフェースの作成

アクションポップアップコンポーネントはユーザーインタラクションを提供します。popup.htmlを作成します:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { 
      width: 300px; 
      padding: 16px;
      font-family: system-ui, -apple-system, sans-serif;
    }
    button { 
      width: 100%; 
      padding: 8px; 
      margin: 4px 0;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Page Enhancer</h2>
  <button id="blue">Blue Background</button>
  <button id="green">Green Background</button>
  <script src="popup.js"></script>
</body>
</html>

ユーザーインタラクションを処理するための対応するpopup.jsを追加します:

// popup.js - Handles popup interactions
document.getElementById('blue').addEventListener('click', () => {
  sendColorChange('#E3F2FD');
});

document.getElementById('green').addEventListener('click', () => {
  sendColorChange('#E8F5E9');
});

async function sendColorChange(color) {
  const [tab] = await browser.tabs.query({
    active: true,
    currentWindow: true
  });
  
  browser.tabs.sendMessage(tab.id, {
    action: 'changeColor',
    color: color
  });
}

JavaScript Firefox アドオンの読み込みとテスト

JavaScript Firefox アドオンをテストするには:

  1. Firefoxを開き、about:debuggingに移動します
  2. 左サイドバーの「このFirefox」をクリックします
  3. 「一時的なアドオンを読み込む」をクリックします
  4. 拡張機能フォルダから任意のファイルを選択します

拡張機能のアイコンがツールバーに表示されます。任意のexample.comページにアクセスして、コンテンツスクリプトの動作を確認してください。拡張機能のアイコンをクリックしてポップアップを開き、背景色の変更をテストします。

ファイルを変更した場合は、about:debuggingで「再読み込み」をクリックすると、ブラウザを再起動することなく変更が即座に適用されます。

MV3開発のためのFirefox拡張機能ベストプラクティス

以下のFirefox拡張機能ベストプラクティスに従うことで、拡張機能がレビューに合格し、安全なユーザーエクスペリエンスを提供できます:

  • 最小限の権限: 現在のタブへのアクセスが必要な場合のみactiveTabをリクエストし、広範なホスト権限を避ける
  • インラインJavaScriptの禁止: MV3のコンテンツセキュリティポリシーはインラインスクリプトをブロックします。常に外部の.jsファイルを使用してください
  • サービスワーカー: バックグラウンドタスクにはサービスワーカーを使用します(ここでは扱いませんが、高度な機能には不可欠です)
  • 安全な通信: コンポーネント間の通信にはbrowser.runtime.sendMessage()を使用します

まとめ

Manifest V3を使用して動作するFirefox拡張機能の構築に成功しました。シンプルなコンテンツスクリプトから本格的な拡張機能への移行は、同じパターンに従います:分離されたコンテキスト、メッセージパッシング、最小限の権限です。これらの基礎をマスターすれば、ユーザーが信頼できる安全でパフォーマンスの高い拡張機能を構築できます。

スキルを拡張するには、ユーザー設定を永続化するためのStorage APIを探索し、複雑なイベント処理のためのバックグラウンドサービスワーカーを実装し、APIアップデートのための最新のMDN WebExtensionsドキュメントを確認してください。

よくある質問

はい、Manifest V3を使用したWebExtensionsは、ブラウザ間でほぼ互換性があります。Chromeがchromeを使用し、Firefoxがbrowserを使用するAPIネームスペースにわずかな違いがありますが、Firefoxは互換性のために両方をサポートしています。

manifest.jsonファイルは、content_scriptsセクションでマッチパターンを指定しています。matchesの配列を変更して他のドメインを含めるか、すべてのサイトに対して*://*/*のような広範なパターンを使用しますが、これには慎重なセキュリティ検討が必要です。

拡張機能をZIPファイルとしてパッケージ化し、addons.mozilla.orgで開発者アカウントを作成し、レビューのために拡張機能を提出し、承認を待ちます。Firefoxは通常24〜48時間以内に拡張機能をレビューします。

コンテンツスクリプトはWebページのコンテキストで実行され、DOM要素にアクセスして変更できます。MV3のバックグラウンドスクリプトは、イベントとAPI呼び出しを処理するサービスワーカーを使用しますが、ページコンテンツに直接アクセスできないため、通信にはメッセージパッシングが必要です。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog