彈出視窗
彈出式視窗是一種對話方塊,它與工具欄按鈕或位址列按鈕相關聯。本頁概述了彈出式視窗,詳細介紹了它們的指定、除錯、調整大小和設計,以及使用示例。

當用戶單擊按鈕時,將顯示彈出式視窗。當用戶單擊彈出式視窗外部的任何位置時,彈出式視窗將關閉。可以透過呼叫執行在彈出式視窗中的指令碼中的window.close()來以程式設計方式關閉彈出式視窗。但是,您無法從擴充套件的 JavaScript 中以程式設計方式開啟彈出式視窗;它只能響應使用者操作而開啟。
您可以使用 Manifest V2 中的 "_execute_browser_action" 和 "_execute_page_action" 快捷方式,以及 Manifest V3 中的 "_execute_action" 和(在支援的情況下)"_execute_page_action" 快捷方式來定義開啟彈出式視窗的鍵盤快捷鍵。有關 manifest.json 鍵 commands 中特殊快捷鍵的詳細資訊,請參閱文件。
指定彈出式視窗
彈出式視窗被指定為一個 HTML 檔案,該檔案可以像普通網頁一樣包含 CSS 和 JavaScript 檔案。但與普通頁面不同的是,JavaScript 可以使用擴充套件具有許可權的所有WebExtension API。
彈出式視窗的文件在每次顯示彈出式視窗時載入,在每次關閉彈出式視窗時解除安裝。
HTML 檔案包含在擴充套件中,並透過 manifest.json 中的 "default_popup" 作為 browser_action 或 page_action 鍵的一部分進行指定。
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
}
彈出式視窗具有內容安全策略,該策略限制了它們可以載入資源的來源,並禁止了一些不安全的做法,例如使用eval()。有關此內容的更多詳細資訊,請參閱內容安全策略。
除錯彈出式視窗
您可以使用附加元件偵錯程式來除錯彈出式視窗的標記和 JavaScript,但您需要啟用“停用彈出式視窗自動隱藏”功能,以防止在單擊彈出式視窗外部時彈出式視窗隱藏。請閱讀關於除錯彈出式視窗的說明。
彈出式視窗大小調整
彈出式視窗會自動調整大小以適應其內容。此演算法在不同瀏覽器之間可能有所不同。
在 Firefox 中,大小在顯示彈出式視窗之前計算,並在 DOM 發生變異後每秒最多計算 10 次。對於嚴格模式文件,大小基於 <body> 元素的佈局大小計算。對於怪異模式,它是 <html> 元素。Firefox 會計算該元素內容的首選寬度,以該寬度重新排列,然後調整大小以避免垂直滾動。如果能適應使用者螢幕,它最多會增大到 **800x600 畫素**。(在 Firefox 60 之前,僅為 680 畫素。)如果使用者將擴充套件的按鈕移至選單或它出現在工具欄溢位區,則彈出式視窗會出現在菜單面板內,並被賦予固定寬度。
設定 CSS 中的彈出式視窗 width 時,應將其設定在 <body> 中,而不是在 :root 中。
在 Firefox Android 57 中,彈出式視窗會以正常頁面的形式在新標籤頁中顯示。
彈出式視窗設計
有關如何設計您的彈出式視窗網頁以匹配 Firefox 樣式的詳細資訊,請參閱Acorn 設計系統。
示例
GitHub 上的 webextensions-examples 儲存庫包含beastify 示例,該示例實現了帶有彈出式視窗的瀏覽器操作。