オプションページでは、ユーザーから変更できるような拡張機能の設定画面を定義します。ユーザーはアドオンマネージャを通じて、アドオンのオプションページにアクセスできます。

このページにユーザーがアクセスする方法や、ブラウザー UI との連携については各ブラウザーによって異なります。

このページは、プログラムから runtime.openOptionsPage() を呼び出して開くこともできます。

オプションページにおけるリソースの読み込み元や、eval() のように安全でない処理は Content Security Policy によって制限されます。詳細は Content Security Policy を参照してください。

オプションページを指定する

オプションページを作成するには、ページを定義する HTML を書きます。このページは通常のページと同様に、CSS と JavaScript ファイルを入れることができます。このページは、 favourite-colour の例から取ってきていて、JavaScript ファイルが含まれます:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

<body>
  <form>
      <label>Favourite colour</label>
      <input type="text" id="colour" >
      <button type="submit">Save</button>
  </form>
  <script src="options.js"></script>
</body>

</html>

ページ内で動く JavaScript はアドオンが権限を持つすべての WebExtension APIs を使うことができます。特に、設定を保管する storage API を使えます。

ページファイルを拡張機能の中にパッケージします.

manifest.json 内に options_ui キーも必要です、ここではページの URL を与えます。

"options_ui": {
  "page": "options.html",
  "browser_style": true
},

options_ui ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間でオプションを共有することができます。

オプションコンテンツのデザイン

Firefox のスタイルにマッチするオプションコンテンツをデザインする方法は Photon Design System の文書を見てください。

例

GitHub の webextensions-examples リポジトリでは、オプションページを使う拡張機能の favourite-colour の例があります。