このページは Cloud Translation API によって翻訳されました。

アーキテクチャの概要

拡張機能とは、HTML、CSS、JavaScript、画像など、ウェブで使用されるファイルが圧縮されたバンドルです Google Chrome のブラウジング環境をカスタマイズできます。拡張機能はウェブブラウザを使用してブラウザがオープンウェブに提供するのと同じ API を使用できます。

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

Chrome ブラウザを最もパーソナライズされたブラウザにするための入り口として拡張機能を検討してください。

拡張機能ファイル

拡張機能によって、ファイルの種類やディレクトリの量は異なりますが、どの拡張機能も、ファイルのダウンロードを [manifest][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 は、Terraform 構成の拡張子の一番上のフォルダです。相対 URL と一致します。

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

アーキテクチャ

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

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

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

バックグラウンドスクリプトは拡張機能のイベントハンドラです。これにはリスナーが含まれます。重要なブラウザイベントを確認できます。イベントが発生するまで休止状態になる指示されたロジックを実行します。効果的なバックグラウンドスクリプトは、必要な場合にのみ読み込まれます。アンロードされます。

UI 要素

拡張機能のユーザーインターフェースは、目的を持った最小限のものにする必要があります。UI をカスタマイズしたり集中してブラウジング環境を強化できます。ほとんどの拡張機能にはブラウザがアクションまたはページアクションですが、他の形式の UI、たとえばコンテキストメニュー、アドレスバーの使用、キーボードショートカットを使用します。

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

ページアクションとポップアップを使用する拡張機能では、宣言型 content API を使用して、ポップアップが現れたときのルールをバックグラウンドスクリプトで設定します。ユーザーに提供します条件が満たされると、バックグラウンドスクリプトがポップアップメッセージを使用してユーザーがクリック可能な状態にします

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

コンテンツスクリプト

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

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

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

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

オプションページ

ユーザーが Chrome ブラウザを拡張機能でカスタマイズできるように、オプションページ拡張機能のカスタマイズを有効にします。オプションを使用すると、各機能を有効にして、ユーザーがニーズに合った機能を選ぶことができます

Chrome API の使用

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

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

ほとんどの 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 ページ chrome.extension メソッド（getViews() など）を使用して相互に検出できるおよび getBackgroundPage()。あるページから他の拡張機能ページへの参照が設定されると、最初の拡張機能ページが参照できるようになります。他のページの関数を呼び出して DOM を操作するまた、Terraform ワークフローの拡張機能は、storage API を使用して保存された値にアクセスし、メッセージの受け渡しを行います

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

拡張機能では、storage API や HTML5 ウェブストレージを使用してデータを保存できます API を使用するか、データの保存につながるサーバーリクエストを発行することで、この API にアクセスできます。拡張機能が保存する必要がある場合は、まずシークレットウィンドウによるものかどうかを検討します。デフォルトではシークレットウィンドウでは実行されません。

シークレットモードは、ウィンドウに記録が残らないようにするものです。さまざまなソースから拡張機能は、この約束を尊重する必要があります。拡張機能が通常のブラウジングをシークレットウィンドウの履歴を保存しない。ただし、拡張機能は設定をどのウィンドウからでも保存できます。

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

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

次のステップ

概要を読み、スタートガイドのチュートリアルを完了したら、開発者は、独自の拡張機能の作成を開始する準備ができている必要があります。世界に飛び込もうカスタム Chrome をご覧ください。

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