為使用者提供選項

擴充功能可讓使用者自訂 Chrome 瀏覽器，選項頁面則可自訂擴充功能。使用選項啟用功能，並允許使用者選擇符合自身需求的功能。

找出選項頁面

使用者可以透過直接連結存取選項頁面，也可以在工具列中對擴充功能圖示按一下滑鼠右鍵，然後選取選項。此外，使用者也可以先開啟 chrome://extensions，找到所需擴充功能，然後依序點選「詳細資料」和選項連結，前往選項頁面。

使用者介面中的「選項」頁面連結
「選項」頁面的連結。
「內容選單選項」頁面
在擴充功能的圖示上按一下滑鼠右鍵。

編寫選項頁面

以下是選項頁面的範例：

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 browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.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 browser.storage.
const restoreOptions = () => {
  browser.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"
  ]
  ...
}

宣告選項頁面行為

擴充功能選項頁面有兩種，分別是完整頁面和內嵌頁面。選項頁面的類型取決於資訊清單中的宣告方式。

整頁模式選項

新分頁會顯示全頁選項頁面。在資訊清單的 "options_page" 欄位中，註冊選項 HTML 檔案。

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
整頁模式選項
在新分頁中開啟全頁選項。

嵌入選項

嵌入式選項頁面可讓使用者調整擴充功能選項，不必離開嵌入式方塊內的擴充功能管理頁面。如要宣告內嵌選項，請在擴充功能資訊清單的 "options_ui" 欄位下註冊 HTML 檔案，並將 "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 中的選項頁面與分頁中的選項頁面，在行為上有些微差異。

選項頁面的連結

擴充功能可以呼叫 browser.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 (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

由於嵌入式選項程式碼並非託管於分頁中，因此無法使用 Tabs API。 如果選項頁面確實需要操控所含的分頁，請改用 runtime.connect() 和 runtime.sendMessage()。

Messaging API

如果擴充功能的選項頁面使用 runtime.connect() 或 runtime.sendMessage() 傳送訊息，系統不會設定傳送者的分頁，且傳送者的網址會是選項頁面網址。

尺寸

內嵌選項應會根據網頁內容自動決定自身大小。不過，嵌入式方塊可能無法為某些類型的內容找到合適的大小。如果選項頁面會根據視窗大小調整內容形狀，就最容易發生這個問題。

如果發生這個問題，請為選項頁面提供固定的最小尺寸，確保內嵌頁面能找到合適的大小。