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

options_ui 鍵來定義套件的選項頁面

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

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

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

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

語法

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

Name Type Description
browser_style 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 的相對路徑。

範例

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

瀏覽器兼容性

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic support40 No4857271
chrome_style40 No No No27
browser_style No No5557 No
open_in_tab40 No4857 No

1. Options pages are always opened in a separate browser tab.

See also

文件標籤與貢獻者

標籤: 
此頁面的貢獻者: 0711kps
最近更新: 0711kps,