跳轉至

建立 2026-09-17 更新 2026-09-17

Popup 與 Options 頁面

Popup 與 Options 頁面是使用者實際看得到、點得到的介面，本質上就是一般的 HTML／CSS／JavaScript 網頁，只是執行在擴充功能自己的環境裡（可以直接呼叫大部分的 Chrome API，不像 Content Script 受限）。

:material-toolbar: Popup：工具列彈出視窗

在 manifest.json 的 action.default_popup 指定一個 HTML 檔案，使用者點擊工具列圖示時就會以彈出視窗的形式顯示：

manifest.json（片段）
{
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png"
  }
}

Popup 有幾個特性要留意：

  • 每次開啟都是全新載入，關閉後裡面的變數、狀態全部消失，需要保存的資料要讀寫 chrome.storage。
  • 尺寸有上限（建議寬度不超過 800px、高度不超過 600px），太大的內容會被裁切或出現捲軸。
  • 若同時設定了 default_popup，chrome.action.onClicked 事件不會觸發，因為點擊圖示的行為變成開啟 popup，兩者是互斥的。

Options：設定頁面

當擴充功能有較多可調整的選項（例如 API 金鑰、顯示偏好），適合獨立成一個設定頁：

manifest.json（片段）
{
  "options_page": "options.html"
}
options.js
const input = document.getElementById("api-key");

// 頁面載入時，讀出先前儲存的設定
chrome.storage.sync.get("apiKey", ({ apiKey }) => {
  if (apiKey) input.value = apiKey;
});

// 使用者輸入後即時儲存
input.addEventListener("change", () => {
  chrome.storage.sync.set({ apiKey: input.value });
});

使用者可以從 chrome://extensions 的擴充功能卡片點擊「擴充功能選項」進入這個頁面，也可以在 options_ui 設定 open_in_tab: true，讓它以獨立分頁開啟而非彈出視窗，適合內容較多的設定介面。

情境 建議
少數幾個開關、常用的快速操作 Popup
需要輸入較多欄位、不常變動的設定 Options 頁面
兩者都需要 Popup 提供常用功能，並附連結或按鈕開啟 Options 頁面做進階設定

下一步

Popup 與 Options 頁面通常需要向 Background 或 Content Script 要資料，這正是 訊息傳遞 要解決的問題。