Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

アーキテクチャの概要

拡張機能は、ウェブプラットフォームで使用される HTML、CSS、JavaScript、画像などのファイルをまとめた zip 形式のバンドルで、Google Chrome のブラウジングエクスペリエンスをカスタマイズします。拡張機能はウェブテクノロジーを使用して構築され、ブラウザがオープンウェブに提供するのと同じ API を使用できます。

拡張機能にはさまざまな機能があります。ユーザーが閲覧して操作するウェブコンテンツを変更したり、ブラウザ自体の動作を拡張したり変更したりできます。

拡張機能は、Chrome ブラウザを最もパーソナライズされたブラウザにするためのゲートウェイと考えることができます。

拡張ファイル

拡張機能はファイルの種類やディレクトリの数が異なりますが、すべて [マニフェスト][docs-manifest] を持つ必要があります。基本的な拡張機能の中には、マニフェストとツールバーアイコンだけで構成されているものもあります。

manifest.json という名前のマニフェストファイルは、最も重要なファイルや拡張機能が使用する可能性のある機能など、拡張機能に関する情報をブラウザに提供します。

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

拡張機能には、ブラウザのツールバーに表示されるアイコンが必要です。ツールバーアイコンを使用すると、簡単にアクセスでき、インストールされている拡張機能を確認できます。ほとんどのユーザーは、アイコンをクリックしてポップアップを使用する拡張機能を利用します。

この Google Mail Checker 拡張機能は、ブラウザアクションを使用します。

Google Mail Checker 拡張機能のスクリーンショット

この Mappy 拡張機能は、ページアクションとコンテンツスクリプトを使用します。

Mappy 拡張機能のスクリーンショット

ファイルを参照する

拡張機能のファイルは、通常の HTML ページのファイルと同様に、相対 URL を使用して参照できます。

<img src="images/my_image.png">

また、各ファイルには絶対 URL を使用してアクセスすることもできます。

chrome-extension://EXTENSION_ID/PATH_TO_FILE

絶対 URL の EXTENSION_ID は、拡張機能システムが各拡張機能に対して生成する一意の識別子です。読み込まれたすべての拡張機能の ID は、URL chrome://extensions にアクセスすると確認できます。PATH_TO_FILE は、拡張機能の最上位フォルダにあるファイルの場所です。相対 URL と一致します。

展開された拡張機能で作業している間は、拡張機能 ID が変更される可能性があります。具体的には、パッケージ化されていない拡張機能の ID は、拡張機能が別のディレクトリから読み込まれると変更されます。拡張機能がパッケージ化されると、ID は再び変更されます。拡張機能のコードが絶対 URL に依存している場合は、chrome.runtime.getURL() メソッドを使用して、開発中に ID をハードコードすることを回避できます。

アーキテクチャ

拡張機能のアーキテクチャは機能によって異なりますが、多くの堅牢な拡張機能には複数のコンポーネントが含まれます。

マニフェスト
バックグラウンドスクリプト
UI 要素
コンテンツスクリプト
オプションページ

バックグラウンドスクリプト

バックグラウンドスクリプトは拡張機能のイベントハンドラです。拡張機能にとって重要なブラウザイベントのリスナーが含まれています。イベントがトリガーされるまで休止状態になり、トリガーされると指示されたロジックを実行します。有効なバックグラウンドスクリプトは、必要なときにのみ読み込まれ、アイドル状態になるとアンロードされます。

UI 要素

拡張機能のユーザーインターフェースは、目的を絞り、最小限に抑える必要があります。UI は、ブラウジングエクスペリエンスを妨げることなく、カスタマイズまたは強化する必要があります。ほとんどの拡張機能にはブラウザアクションまたはページアクションがありますが、コンテキストメニュー、アドレスバーの使用、キーボードショートカットの作成など、他の形式の UI を含めることもできます。

ポップアップなどの拡張機能の UI ページには、JavaScript ロジックを含む通常の HTML ページを含めることができます。拡張機能は、tabs.create または window.open() を呼び出して、拡張機能に存在する追加の HTML ファイルを表示することもできます。

ページアクションとポップアップを使用する拡張機能は、宣言型コンテンツ API を使用して、ポップアップをユーザーが利用できるタイミングに関するルールをバックグラウンドスクリプトで設定できます。条件が満たされると、バックグラウンドスクリプトがポップアップと通信し、ユーザーがアイコンをクリックできるようにします。

ポップアップを表示するページアクションを含むブラウザウィンドウ

コンテンツスクリプト

ウェブページの読み取りまたは書き込みを行う拡張機能は、コンテンツスクリプトを利用します。コンテンツスクリプトには、ブラウザに読み込まれたページのコンテキストで実行される JavaScript が含まれています。コンテンツスクリプトは、ブラウザがアクセスするウェブページの DOM を読み取り、変更します。

ページアクションとコンテンツスクリプトが表示されたブラウザウィンドウ

コンテンツスクリプトは、メッセージを交換し、storage API を使用して値を保存することで、親拡張機能と通信できます。

コンテンツスクリプトと親拡張機能間の通信パスを表示します

オプションページ

拡張機能で Chrome ブラウザをカスタマイズできるのと同様に、オプションページでは拡張機能をカスタマイズできます。オプションを使用すると、機能を有効にして、ユーザーが自分のニーズに関連する機能を選択できるようになります。

Chrome API の使用

拡張機能は、ウェブページと同じ API にアクセスできるだけでなく、ブラウザとの緊密な統合を実現する拡張機能固有の API も使用できます。拡張機能とウェブページはどちらも標準の window.open() メソッドを使用して URL を開くことができますが、拡張機能は代わりに Chrome API の tabs.create メソッドを使用して、URL を表示するウィンドウを指定できます。

非同期メソッドと同期メソッド

ほとんどの Chrome API メソッドは非同期です。オペレーションの終了を待たずにすぐに戻ります。拡張機能が非同期オペレーションの結果を知る必要がある場合は、コールバック関数をメソッドに渡すことができます。コールバックは、メソッドが戻った後、後で（場合によってはかなり後で）実行されます。

拡張機能でユーザーが現在選択しているタブを新しい URL に移動する必要がある場合、現在のタブの ID を取得してから、そのタブのアドレスを新しい URL に更新する必要があります。

tabs.query メソッドが同期の場合、次のようになります。

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

query() は非同期であるため、このアプローチは失敗します。作業の完了を待たずに戻り、値を返しません。コールバックパラメータがシグネチャで使用可能な場合、メソッドは非同期です。

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

タブを正しくクエリして URL を更新するには、拡張機能でコールバックパラメータを使用する必要があります。

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

上記のコードでは、行は 1、4、2 の順に実行されます。query() に指定されたコールバック関数が呼び出され、2 行目が実行されます。ただし、現在選択されているタブに関する情報が利用可能になった後でのみ実行されます。これは query() が戻った後、しばらくしてから発生します。update() は非同期ですが、拡張機能は更新の結果を処理しないため、コードはコールバックパラメータを使用しません。

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

このメソッドは、URL を string として同期的に返し、他の非同期処理は行いません。

詳細

詳しくは、Chrome API のリファレンスドキュメントをご覧になるか、次の動画をご覧ください。

ページ間の通信

拡張機能のさまざまなコンポーネントが相互に通信する必要があることはよくあります。異なる HTML ページは、getViews() や getBackgroundPage() などの chrome.extension メソッドを使用して互いに検索できます。ページが他の拡張機能ページを参照すると、最初のページは他のページの関数を呼び出して、それらの DOM を操作できます。また、拡張機能のすべてのコンポーネントは、storage API を使用して保存された値にアクセスし、メッセージパッシングを介して通信できます。

データの保存とシークレットモード

拡張機能は、storage API、HTML5 web storage API を使用するか、データを保存するサーバーリクエストを行うことで、データを保存できます。拡張機能で何かを保存する必要がある場合は、まずシークレットウィンドウからかどうかを検討します。デフォルトでは、拡張機能はシークレットウィンドウでは実行されません。

シークレットモードでは、ウィンドウに履歴が残らないことが保証されます。シークレットウィンドウのデータを扱う場合、拡張機能はこの約束を遵守する必要があります。拡張機能が通常ブラウジング履歴を保存する場合、シークレットウィンドウの履歴は保存しないでください。ただし、拡張機能は、シークレットウィンドウかどうかを問わず、任意のウィンドウの設定の優先設定を保存できます。

ウィンドウがシークレットモードかどうかを検出するには、関連する tabs.Tab オブジェクトまたは windows.Window オブジェクトの incognito プロパティを確認します。

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

次のステップ

概要を読み、スタートガイドのチュートリアルを完了したら、独自の拡張機能の作成を開始できます。カスタム Chrome の世界について詳しくは、以下のリソースをご覧ください。

拡張機能のデバッグに使用できるオプションについては、デバッグチュートリアルをご覧ください。
Chrome 拡張機能は、オープンウェブで利用できるものを超える強力な API にアクセスできます。chrome.* API ドキュメントでは、各 API について説明します。
拡張機能開発の概要には、高度な拡張機能の作成に関連するドキュメントへのリンクが多数あります。