拡張機能の中身

ジャンプ先:
  1. manifest.json
  2. バックグラウンドスクリプト
  3. サイドバー、ポップアップ、オプションページ
  4. 拡張機能ページ
  5. コンテンツスクリプト
  6. Web accessible resources

拡張機能は複数のファイルで構成されており、それらのファイルが配布・インストール用にパッケージ化されたものです。この記事では、拡張機能に含まれるファイルについて簡単に説明します。

manifest.json

どの拡張機能においても不可欠な唯一のファイルです。このファイルには名前やバージョン、必要とするパーミッションなど、拡張機能に関する基本的なメタデータが含まれます。加えて、アドオンに含まれている他のファイルへの参照も含んでいます。

このマニフェストには、下記のファイルに対する参照を含めることができます。

詳細は manifest.json のリファレンスを参照して下さい。

マニフェストから参照される他に、拡張機能はサポートするファイルの拡張機能ページを持つことができます。.

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

しばしば拡張機能は、ウェブページやブラウザーウィンドウと独立したうえで、状態を長く維持したり処理を長時間実行する必要があります。バックグラウンドスクリプトはそのような場合のためのスクリプトなのです。

バックグラウンドスクリプトは拡張機能が読み込まれると同時にロードされ、拡張機能が無効にされるかアンインストールされるまでロードされた状態を維持します。あらかじめ要求された必要なパーミッションの限りにおいて、スクリプト中で WebExtention API を使うことができます。

バックグラウンドスクリプトを定義する

"manifest.json" の中に background キーを用いることでバックグラウンドスクリプトをインクルードできます。

// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

複数のバックグラウンドスクリプトを定義することも可能であり、その場合は 1 つの ウェブページに複数のスクリプトが読み込まれているのと同様に、スクリプトは同じコンテキストを共有します。

バックグラウンドスクリプトの実行環境

DOM APIs

バックグラウンドスクリプトは、バックグラウンドページと呼ばれる特殊なページのコンテキストで動作します。このコンテキストでは、グローバルオブジェクト window と、これに付随する標準 DOM API すべてが利用可能です。

自分でバックグラウンドページを用意する必要はなく、バックグラウンドスクリプトをインクルードした際に空のバックグラウンドページが作成されます。

とはいえ、別個の HTML ファイルとしてバックグラウンドページを自分で用意することも可能です。

// manifest.json

"background": {
  "page": "background-page.html"
}

WebExtension APIs

バックグラウンドスクリプトは、その拡張機能が持つパーミッションの範囲で WebExtension API にアクセスできます。

Cross-origin access

バックグラウンドスクリプトは、拡張機能が持つ host パーミッションに一致するホストに XHR リクエストを送信できます。

Web content

バックグラウンドスクリプトから ウェブページに直接アクセスすることができません。しかし、ウェブページにコンテンツスクリプトを読み込ませれば、メッセージを渡す API を使ってコンテンツスクリプトと通信をすることができます。

Content security policy

バックグラウンドスクリプトは Content Security Policy による制約を受けており、eval() のように危険な処理は実行できません。詳細は Content Security Policy を参照してください。

拡張機能には HTML 文書で中身を決めたいろいろなユーザーインターフェイスコンポーネントを入れる事ができます。

各コンポーネント用に、HTML ファイルと、それを指定する manifest.json の特定プロパティを作成します。HTML ファイルには、通常のウェブページと同様に、 CSS と JavaScript ファイルを入れる事ができます。

これらのすべては拡張機能ページの一種で、通常のウェブページと異なり、JavaScript はバックグラウンドスクリプトと同じ権限で WebExtension API を使用できます。バックグラウンドページの変数にもruntime.getBackgroundPage() を使って直接アクセスすることさえできます。

拡張機能ページ

拡張機能に事前定義された UI コンポーネントに属さない HTML 文書を入れることもできます。サイドバー、ポップアップ、オプションページに提供されるドキュメントと違って、これは manifest.json 内にエントリーがないです。しかし、バックグラウンドスクリプトと同様に権限のある WebExtension API のすべてにアクセスできます。

典型的には windows.create() か tabs.create() を使ってページを読み込みます。

詳しくは拡張機能ページを見てください。

コンテンツスクリプト

ウェブページにアクセスして操作するにはコンテンツスクリプトが用いられます。コンテンツスクリプトは ウェブページに読み込まれて実行されます。

コンテンツスクリプト はアドオンが提供するスクリプトであり、ウェブページのコンテキスト内で動作します。このため、<script> 要素で取得されたものなど、そのページ自身が読み込んだスクリプトとは異なります。

ウェブページに読み込まれた通常のスクリプトと同様に、コンテンツスクリプトも ウェブページの DOM へアクセスできます。

通常のスクリプトと異なるのは、コンテンツスクリプトで以下のことが可能な点です。

  • クロスドメインの XHR リクエストを作成できる
  • WebExtension API の小さなサブセットを利用できる
  • バックグラウンドスクリプトとメッセージの交換ができ、この方法ですべての WebExtension API に間接的にアクセスできる

コンテンツスクリプトから通常のスクリプトに直接アクセスすることはできませんが、標準化されている window.postMessage() API を用いれば、スクリプト間でメッセージを交換することが可能です。

ここでの議論対象であるコンテンツスクリプトとは基本的に JavaScript のことを指していますが、先ほどと同じ方法で ウェブページに CSS を差し込むこともできます。

詳しくは コンテンツスクリプトの記事を参照してください。

Web accessible resources

Web accessible resources とは、拡張機能にインクルードしてコンテンツスクリプトや ウェブページのスクリプトからアクセスできるリソースのことであり、代表的なものは画像や HTML / CSS / JavaScript です。web-accessible なリソースは、特殊な URI スキームを介して ウェブページのスクリプトやコンテンツスクリプトから参照できます。

例えばコンテンツスクリプトから ウェブページ内に画像を挿入したい場合、拡張機能に画像をインクルードして web-accessible とし、画像を src 属性で参照する img タグをコンテンツスクリプトが作成して ウェブページに追加する、といったシナリオが考えられます。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: Uemmra3, Gomita, KitaitiMakoto, hashedhyphen, forzando, lv7777, lina_taso
最終更新者: Uemmra3,