擴充套件頁面 - Mozilla | MDN

指定擴充套件頁面

您可以在擴充套件中包含 HTML 檔案以及相關的 CSS 或 JavaScript 檔案。這些檔案可以包含在根目錄中，也可以組織在有意義的子資料夾內。

/my-extension
    /manifest.json
    /my-page.html
    /my-page.js

顯示擴充套件頁面

顯示擴充套件頁面有兩種選擇：windows.create() 和 tabs.create()。

例如，使用windows.create()，您可以將 HTML 頁面開啟到一個分離的面板中（一個沒有位址列、書籤欄等常規瀏覽器 UI 的視窗），以建立類似對話方塊的使用者體驗。

let createData = {
  type: "detached_panel",
  url: "my-page.html",
  width: 250,
  height: 100,
};
let creating = browser.windows.create(createData);

當不再需要視窗時，可以以程式設計方式將其關閉。

例如，在使用者單擊按鈕後，您可以將當前視窗的 ID 傳遞給windows.remove()。

document.getElementById("close-me").addEventListener("click", () => {
  let winId = browser.windows.WINDOW_ID_CURRENT;
  let removing = browser.windows.remove(winId);
});

擴充套件頁面和歷史記錄

預設情況下，您透過這種方式開啟的頁面將像普通網頁一樣儲存在使用者的歷史記錄中。如果您不希望有此行為，請使用history.deleteUrl() 來刪除瀏覽器的記錄。

function onVisited(historyItem) {
  if (historyItem.url === browser.extension.getURL(myPage)) {
    browser.history.deleteUrl({ url: historyItem.url });
  }
}

browser.history.onVisited.addListener(onVisited);

要使用歷史記錄 API，您必須在 manifest.json 檔案中請求 "history" 許可權。