扩展页面 - 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" 权限。