options_ui

型別 Object
強制 No
範例
json
"options_ui": {
  "page": "options/options.html"
}

用 options_ui 鍵來定義套件的選項頁面 (en-US)。

選項頁面包含了套件的設定。用戶可以從套件管理員進入這個畫面，而你可以用runtime.openOptionsPage() (en-US)打開它。

指定 options_ui 爲一個與套件打包在一起的 HTML 檔案路徑。就像一般的網頁一樣，HTML 檔案可包含 CSS 與 JavaScript 檔案。跟普通頁面不同的是，它可以使用所有被授權 (en-US)的套件 APIs。 不過，它執行的作用域不同於你的後端腳本。

如果你想在選項頁面與後端腳本的 JavaScript 裡共用資料或函數，你可以透過用extension.getBackgroundPage() (en-US)與後端腳本的 Window (en-US) 關聯、用extension.getViews() (en-US)與任何套件內腳本的Window (en-US)關聯來實現。你也可以透過 runtime.sendMessage() (en-US)、 runtime.onMessage (en-US)，跟（或）runtime.connect() (en-US)在選項頁面與後端的頁面的 JavaScript 之間溝通。 後者（或是runtime.Port (en-US)）也可以用來在後端腳本與**內容腳本**之間共用選項。

一般要儲存選項頁面的選項變動時，你要可能會用 storage API、storage.sync (en-US)（如果你想要在所有用戶登入的瀏覽器實例之間同步設定的話），或者透過 storage.local （如果設定是針對目前身份或機器）。而如果你希望你的後端腳本（或內容腳本）監聽該變化，你可以加上 storage.onChanged (en-US) 監聽器。

語法

options_ui 鍵是一個包含了下列內容的物件：

Name Type Description
browser_style (en-US) Boolean

可選，預設爲 true。

用這個來替你的頁面引入一個樣式表，使你的頁面與瀏覽器UI以及其他用 browser_style 的套件看起來一致。雖然它預設是true還是建議你加入這個屬性。

在 Firefox 裡，樣式表可以在 chrome://browser/content/extension.css 或 chrome://browser/content/extension-mac.css（OS X）查看。設定尺寸的時候注意到這個樣式表目前會做這個設定box-sizing: border-box （查看 box-sizing）。

Firefox風格指南寫到一些你可以應用到彈出視窗裡面的元素上來變成特定樣式的class。
open_in_tab Boolean

可選，預設爲 false。

如果設爲 true，選項頁面會在普通的瀏覽器頁籤開啓而不是整合在瀏覽器的套件管理員裡。

page String

強制。

包含選項頁面細項的HTML檔案路徑。

這個路徑是 manifest.json 的相對路徑。

範例

json
"options_ui": {
    "page": "options/options.html"
  }

瀏覽器兼容性

BCD tables only load in the browser

See also