イマドキのChrome拡張機能のオプション画面の作り方

Chrome拡張機能では、ユーザごとに設定を変更することができるオプション画面を作成することができます。オプション画面はアドレスバーの隣のアイコンを右クリックするか、拡張機能管理画面から設定することができます。

このオプション画面ですが、Chromeのバージョン40以降で仕様が変更になりました。以下が公式ドキュメントです。

https://developer.chrome.com/extensions/optionsV2

以前までの方法ではオプション画面では以下のようにmanifest.jsonを編集していました。

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

これが次のような指定方法に変わりました。

{
  "name": "My extension",
  ...
  "options_ui": {
    // 記載が必須
    "page": "options.html",
    // true推奨
    "chrome_style": true,
    //true非推奨　将来的には廃止される
    //"open_in_tab": true
  },
  ...
}

それぞれのパラメータの詳細は以下のようになっています。

• page(string)

  オプションの対象とするHTMLファイルのパスを書きます。

  これは従来どおりです。

• chrome_style(boolean)

  user agent style適応の有無を設定します。

  user agent styleとはブラウザごとに定義されたデフォルトのCSS設定を指します。

• open_in_tab(boolean)

  オプションページを開いたときに、新しいタブを開くかを設定します。trueにすると新しいタブが開きます。将来的には新しいタブを開く方式は廃止されます。