読者です 読者をやめる 読者になる 読者になる

drilldripper’s blog

機械学習とソフトウェア開発を頑張ってます

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

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にすると新しいタブが開きます。将来的には新しいタブを開く方式は廃止されます。

UI部分の細かな設定が行えるようになったということになります。実際に先日作った拡張機能ではタブ表示をオフにしています。

しかし私が慣れていないだけかもしれませんが、タブが開かない方式のUIは現状微妙に感じます。アドレスバーのアイコンからオプションを選択すると、Chrome拡張機能管理画面に遷移し、オプション画面以外の操作を奪われてしまいます。 f:id:drilldripper:20160720211241p:plain

(拡張機能管理画面から直接オプションを選ぶのであれば、そこまで悪くないと思います。)

公式ドキュメントにはそのあたりのことが書いてあります。

This is only useful to delay the inevitable deprecation of the old options UI! It will be removed soon, so try not to use it. It will break.

ようするにユーザから反発はあるだろうけど、いずれタブ表示は使えなくなるから早く乗り換えろ、ということらしいです。

新しいオプションページ流行る日は来るのでしょうか…?