扩展页面

您可以将 HTML 页面包含在扩展中，以提供表单、帮助或扩展所需的任何其他内容。

Example of a simple bundled page displayed as a detached panel.

这些页面还可以访问与扩展的后台脚本可用的相同特权 JavaScript API。但是，它们位于自己的选项卡中，具有自己的 JavaScript 事件队列、全局变量等。

将后台页面视为“隐藏的扩展页面”。

指定扩展页面

您可以在扩展中包含 HTML 文件以及相关的 CSS 或 JavaScript 文件。这些文件可以包含在根目录中，也可以组织在有意义的子文件夹中。

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

显示扩展页面

有两种选项可以显示扩展页面：windows.create() 和 tabs.create().

例如，使用 windows.create()，您可以将 HTML 页面打开到一个分离的面板（一个没有地址栏、书签栏等正常浏览器 UI 的窗口）中，以创建类似对话框的用户体验

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

当不再需要窗口时，可以使用编程方式关闭它。

例如，在用户单击按钮后，您可以将当前窗口的 ID 传递给 windows.remove()

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

扩展页面和历史记录

默认情况下，您以这种方式打开的页面将存储在用户的历史记录中，就像普通网页一样。如果您不想出现这种行为，请使用 history.deleteUrl() 删除浏览器的记录

js
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” 权限。

网页设计

有关如何设计网页以匹配 Firefox 样式的详细信息，请参阅 Acorn 设计系统。

示例

GitHub 上的 webextensions-examples 存储库包含 window-manipulator 示例，该示例实现了创建窗口的几种选项。