このページは Cloud Translation API によって翻訳されました。

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

ユーザーが Chrome ブラウザをカスタマイズできるのと同じように、オプションページで拡張機能のカスタマイズに使用できます。オプションを使用して機能を有効にし、ユーザーが選択できるようにするニーズに合った機能を選ぶことができます

オプションページを見つける

オプションページにアクセスするには、直接リンクを使用するか、ツールバーの拡張機能アイコンを右クリックしてオプションを選択します。また、ユーザーはオプションページに移動できます。まず chrome://extensions を開いて目的の拡張機能を見つけ、[詳細] をクリックしてからオプションのリンクを選択します。

ユーザーインターフェース内の [オプション] ページへのリンク — </ph> [オプション] ページへのリンク。

コンテキストメニューオプションページ — </ph> 拡張機能のアイコンを右クリックします。

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

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

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <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>

オプションのスクリプトの例を次に示します。options.html と同じフォルダに保存します。これにより、storage.sync API を使用するデバイス間でユーザーの優先オプションが保存されます。

options.js:

// Saves options to chrome.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  chrome.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
  chrome.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

最後に、拡張機能のマニフェストファイルに "storage" 権限を追加します。

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

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

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

ページ全体のオプション

ページ全体のオプションページが新しいタブに表示されます。マニフェストの "options_page" フィールドにオプションの HTML ファイルを登録します。

manifest.json:

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

埋め込みオプション

埋め込みオプション ページでは、ユーザーは埋め込みボックス内の拡張機能管理ページ。埋め込みオプションを宣言するには、HTML 変数を登録します。このファイルは、拡張機能マニフェストの "options_ui" フィールドの下にあり、"open_in_tab" キーは false に設定されています。

manifest.json:

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

page（文字列）: オプションページの、拡張機能のルートからの相対パスを指定します。
open_in_tab（ブール値）: 拡張機能のオプションページを新しいタブで開くかどうかを指定します。false に設定した場合、拡張機能のオプションページは新しいタブで開かれるのではなく、chrome://extensions に埋め込まれます。

違いを考慮する

chrome://extensions 内に埋め込まれたオプションページは、タブのオプションページと動作が微妙に異なります。

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

拡張機能からオプションページに直接リンクするには、 chrome.runtime.openOptionsPage()。たとえば、次のようにポップアップに追加できます。

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

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 は使用できません。代わりに runtime.connect() と runtime.sendMessage() を使用してください。オプションページで、それに含まれるタブを操作する必要がある場合。

Messaging API

拡張機能のオプションページで runtime.connect() または runtime.sendMessage() の場合、送信者のタブは設定されず、送信者の URL はオプションページの URL です。

サイズ

埋め込みオプションでは、ページコンテンツに基づいて自動的にサイズを決定する必要があります。ただし、コンテンツの種類によっては、埋め込まれたボックスのサイズが適切でないことがあります。この問題が最も多いのはコンテンツの形状をウィンドウサイズに応じて調整するオプションページです。

これが問題になる場合は、オプションページのサイズを固定して最小サイズを指定し、適切なサイズが見つかるでしょう。

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

オプション ページを見つける

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

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

ページ全体のオプション

埋め込みオプション

違いを考慮する

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

Tabs API

Messaging API

サイズ

オプションページを見つける

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

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

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