ユーザーに選択肢を提供する

オプション ページを提供することで、ユーザーが拡張機能の動作をカスタマイズできるようにします。ユーザーは、ツールバーの拡張機能アイコンを右クリックして [オプション] を選択するか、chrome://extensions の拡張機能管理ページに移動して目的の拡張機能を見つけ、[**詳細**] をクリックしてオプションのリンクを選択することで、拡張機能のオプションを表示できます。

オプション ページを作成する

オプション ページの例を以下に示します。

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<label>
  <input type="checkbox" id="like">
  I like colors.
</label>

<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>
</html>

storage.sync API を使用すると、ユーザーが選択したオプションをデバイス間で保存できます。

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

オプション ページの動作を宣言する

拡張機能のオプション ページには、フルページと埋め込みの 2 種類があります。オプションのタイプは、マニフェストでの宣言方法によって決まります。

フルページ オプション

拡張機能のオプション ページは新しいタブに表示されます。オプションの HTML ファイルは、options_page フィールドに登録されています。

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

フルページ オプション

埋め込みオプション

埋め込みオプションを使用すると、埋め込みボックス内の拡張機能管理ページから移動せずに、拡張機能のオプションを調整できます。埋め込みオプションを宣言するには、拡張機能マニフェストの options_ui フィールドに HTML ファイルを登録し、open_in_tab キーを false に設定します。

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

埋め込みオプション

  • page（文字列）

    拡張機能のルートからの相対パスで指定するオプション ページへのパス。

  • open_in_tab（ブール値）

    埋め込みオプション ページを宣言するには、false と指定します。true の場合、拡張機能のオプション ページは chrome://extensions に埋め込まれるのではなく、新しいタブで開きます。

違いを考慮する

chrome://extensions に埋め込まれたオプション ページは、独自のタブでホストされていないため、動作に微妙な違いがあります。

オプション ページへのリンク

拡張機能は、オプション ページに直接リンクできます。 chrome.runtime.openOptionsPage()

<button id="go-to-options">Go to options</button>

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

Tabs API

拡張機能の埋め込みオプション ページのコードはタブ内でホストされないため、Tabs API の使用方法に 影響します。

  • tabs.query は、拡張機能のオプション ページの URL 内のタブを検出できません。
  • tabs.onCreated は、オプション ページが開いても発生しません。
  • tabs.onUpdated は、オプション ページのページ読み込み状態が変更されても配信されません。
  • tabs.connect または tabs.sendMessage を使用してオプション ページと通信することはできません。

オプション ページで包含タブを操作する必要がある場合は、runtime.connect と runtime.sendMessage を使用すると、これらの制限を回避できます。

Messaging API

拡張機能のオプション ページが runtime.connect または runtime.sendMessage を使用してメッセージを送信する場合、送信者のタブは設定されず、送信者の URLは オプション ページの URL になります。

サイズ

埋め込みオプションは、ページ コンテンツに基づいて独自のサイズを自動的に決定する必要があります。ただし、埋め込みボックスでは、一部のタイプのコンテンツに適したサイズが見つからない場合があります。この問題は、ウィンドウ サイズに基づいてコンテンツの形状を調整するオプション ページで最もよく発生します。

この問題が発生する場合は、埋め込みページが適切なサイズを見つけられるように、オプション ページの固定最小サイズを指定してください。