{{AddonSidebar}}
拡張機能は複数のファイルで構成されており、それらのファイルが配布・インストール用にパッケージ化されたものです。この記事では、拡張機能に含まれるファイルについて簡単に説明します。
どの拡張機能においても不可欠な唯一のファイルです。このファイルには名前やバージョン、必要とするパーミッションなど、拡張機能に関する基本的なメタデータが含まれます。加えて、アドオンに含まれている他のファイルへの参照も含んでいます。
このマニフェストには、下記のファイルに対する参照を含めることができます。
詳細は manifest.json のリファレンスを参照してください。
マニフェストに載っているものの他に、拡張機能はサポートするファイルの拡張機能ページを持つことができます。
しばしば拡張機能は、ウェブページやブラウザーウィンドウと独立したうえで、状態を長く維持したり処理を長時間実行する必要があります。バックグラウンドスクリプトはそのような場合のためのスクリプトなのです。
バックグラウンドスクリプトは拡張機能が読み込まれると同時にロードされ、拡張機能が無効にされるかアンインストールされるまでロードされた状態を維持します。あらかじめ要求された必要なパーミッションの限りにおいて、スクリプト中で WebExtention API を使うことができます。
{{英語版章題("Specifying background scripts")}}
"manifest.json" の中に background キーを用いることでバックグラウンドスクリプトをインクルードできます。
// manifest.json
"background": {
"scripts": ["background-script.js"]
}
複数のバックグラウンドスクリプトを定義することも可能であり、その場合は 1 つの ウェブページに複数のスクリプトが読み込まれているのと同様に、スクリプトは同じコンテキストで動作します。
バックグラウンドスクリプトを指定する代わりに、ES5 モジュールをサポートするという追加された利点のあるバックグラウンドページを指定することもできます:
manifest.json
// manifest.json
"background": {
"page": "background-page.html"
}
background-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="module" src="background-script.js"></script>
</head>
</html>
{{英語版章題("Background script environment")}}
バックグラウンドスクリプトはバックグラウンドページと呼ばれる特殊なページのコンテキストで実行されます。ここでは window というグローバルオブジェクトが利用でき、そのオブジェクトによってすべての DOM API 標準が利用できます。
バックグラウンドスクリプトは、その拡張機能が持つパーミッションの範囲で WebExtension API にアクセスできます。
バックグラウンドスクリプトは、拡張機能が持つ host パーミッションに一致するホストに XHR リクエストを送信できます。
バックグラウンドスクリプトからウェブページに直接アクセスすることができません。しかし、ウェブページにコンテンツスクリプトを読み込ませれば、メッセージを渡す API を使ってコンテンツスクリプトと通信をすることができます。
バックグラウンドスクリプトは Content Security Policy による制約を受けており、eval() のように危険な処理は実行できません。詳細は Content Security Policy を参照してください。
拡張機能には HTML 文書で中身を決めたいろいろなユーザーインターフェイスコンポーネントを入れる事ができます。
各コンポーネント用に、HTML ファイルと、それを指定する manifest.json の特定プロパティを作成します。HTML ファイルには、通常のウェブページと同様に、CSS と JavaScript ファイルを入れる事ができます。
これらのすべては拡張機能ページの一種で、通常のウェブページと異なり、JavaScript はバックグラウンドスクリプトと同じ権限で WebExtension API を使用できます。バックグラウンドページの変数にも{{WebExtAPIRef("runtime.getBackgroundPage()")}} を使って直接アクセスすることさえできます。
拡張機能に事前定義された UI コンポーネントに属さない HTML 文書を入れることもできます。サイドバー、ポップアップ、オプションページに提供されるドキュメントと違って、これは manifest.json 内にエントリーがないです。しかし、バックグラウンドスクリプトと同様に権限のある WebExtension API のすべてにアクセスできます。
典型的には {{WebExtAPIRef("windows.create()")}} か {{WebExtAPIRef("tabs.create()")}} を使ってページを読み込みます。
詳しくは拡張機能ページを見てください。
ウェブページにアクセスして操作するにはコンテンツスクリプトが用いられます。コンテンツスクリプトは ウェブページに読み込まれて実行されます。
コンテンツスクリプト はアドオンが提供するスクリプトであり、ウェブページのコンテキスト内で動作します。このため、{{HTMLElement("script")}} 要素で取得されたものなど、そのページ自身が読み込んだスクリプトとは異なります。
ウェブページに読み込まれた通常のスクリプトと同様に、コンテンツスクリプトも ウェブページの DOM へアクセスできます。
通常のスクリプトと異なるのは、コンテンツスクリプトで以下のことが可能な点です。
コンテンツスクリプトから通常のスクリプトに直接アクセスすることはできませんが、標準化されている window.postMessage() API を用いれば、スクリプト間でメッセージを交換することが可能です。
ここでの議論対象であるコンテンツスクリプトとは基本的に JavaScript のことを指していますが、先ほどと同じ方法で ウェブページに CSS を差し込むこともできます。
詳しくは コンテンツスクリプトの記事を参照してください。
Web accessible resources とは、拡張機能にインクルードしてコンテンツスクリプトや ウェブページのスクリプトからアクセスできるリソースのことであり、代表的なものは画像や HTML / CSS / JavaScript です。web-accessible なリソースは、特殊な URI スキームを介して ウェブページのスクリプトやコンテンツスクリプトから参照できます。
例えばコンテンツスクリプトから ウェブページ内に画像を挿入したい場合、拡張機能に画像をインクルードして web-accessible とし、画像を src 属性で参照する img タグをコンテンツスクリプトが作成して ウェブページに追加する、といったシナリオが考えられます。
詳細は、manifest.json のキーの web_accessible_resources の文書を見てください。