在工具栏中添加按钮

工具栏按钮是扩展程序可用的主要 UI 组件之一。工具栏按钮位于主浏览器工具栏中，包含一个图标。当用户点击图标时，会发生以下两种情况之一

如果您为图标指定了弹出窗口，则会显示弹出窗口。弹出窗口是使用 HTML、CSS 和 JavaScript 指定的短暂对话框。
如果您没有指定弹出窗口，则会生成一个点击事件，您可以在代码中监听该事件，并对事件做出响应执行其他操作。

使用 WebExtension API，此类按钮称为“浏览器操作”，设置方法如下

清单文件 manifest.json 键 browser_action 用于定义按钮。
JavaScript API browserAction 用于监听点击事件，并通过代码更改按钮或执行操作。

一个简单的按钮

在本节中，我们将创建一个扩展，它在工具栏中添加一个按钮。当用户点击按钮时，我们将在新标签页中打开 https://mdn.org.cn。

首先，创建一个新目录“button”，并在其中创建一个名为“manifest.json”的文件，内容如下

json

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

这指定了我们将有一个名为“background.js”的后台脚本，以及一个浏览器操作（按钮），其图标位于“icons”目录中。

接下来，在“buttons”目录中创建“icons”目录，并将下面显示的两个图标保存在其中

“page-16.png”

“page-32.png”

注意：这些图标来自 Recep Kütük 创建的 bitsies! 图标集。

我们有两个图标，因此我们可以在高密度显示器中使用较大的图标。浏览器将负责为当前显示器选择最佳图标。

接下来，在扩展的根目录中创建“background.js”，并赋予其以下内容

function openPage() {
  browser.tabs.create({
    url: "https://mdn.org.cn",
  });
}

browser.browserAction.onClicked.addListener(openPage);

这会监听浏览器操作的点击事件；当事件触发时，openPage() 函数会运行，它使用 tabs API 打开指定页面。

此时，完整的扩展程序应如下所示

button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json

现在安装扩展程序并点击按钮

The toolbar button added by the extension

添加弹出窗口

让我们尝试向按钮添加弹出窗口。将 manifest.json 替换为以下内容

json

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

我们对原始文件进行了两个更改

删除了对“background.js”的引用，因为现在我们将处理弹出窗口脚本中的扩展程序逻辑（您也可以使用 background.js 和弹出窗口，只是在这种情况下我们不需要它）。
添加了 "default_popup": "popup/choose_page.html"，这告诉浏览器该浏览器操作现在将在点击时显示一个弹出窗口，其文档位于“popup/choose_page.html”中。

因此，我们现在需要创建该弹出窗口。创建一个名为“popup”的目录，然后在其中创建一个名为“choose_page.html”的文件。赋予其以下内容

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose_page.css" />
  </head>
  <body>
    <div class="page-choice">developer.mozilla.org</div>
    <div class="page-choice">support.mozilla.org</div>
    <div class="page-choice">addons.mozilla.org</div>
    <script src="choose_page.js"></script>
  </body>
</html>

您可以看到这是一个包含三个 <div> 元素的普通 HTML 页面，每个元素中包含一个 Mozilla 网站的名称。它还包含一个 CSS 文件和一个 JavaScript 文件，我们将在下一步中添加它们。

在“popup”目录中创建一个名为“choose_page.css”的文件，并赋予其以下内容

css

html,
body {
  width: 300px;
}

.page-choice {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.page-choice:hover {
  background-color: #cff2f2;
}

这只是我们弹出窗口的一些样式。

接下来，在“popup”目录中创建一个“choose_page.js”文件，并赋予其以下内容

document.addEventListener("click", (event) => {
  if (!event.target.classList.contains("page-choice")) {
    return;
  }

  const chosenPage = `https://${event.target.textContent}`;
  browser.tabs.create({
    url: chosenPage,
  });
});

在我们的 JavaScript 代码中，我们监听弹出窗口选项的点击事件。我们首先检查点击是否落在页面选项之一上；如果不是，则什么也不做。如果点击确实落在页面选项上，我们从选项中构建一个 URL，并在包含相应页面的新标签页中打开它。请注意，我们可以在弹出窗口脚本中使用 WebExtension API，就像在后台脚本中一样。

扩展程序的最终结构应如下所示

button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json

现在重新加载扩展程序，再次点击按钮，然后尝试点击弹出窗口中的选项

The toolbar button added by the extension with a popup

页面操作

页面操作与浏览器操作类似，只是它们适用于仅与特定页面相关的操作，而不是整个浏览器。

浏览器操作始终显示，而页面操作仅在它们相关的标签页中显示。页面操作按钮显示在 URL 栏中，而不是浏览器工具栏中。

了解更多

browser_action 清单文件键
browserAction API
浏览器操作示例
page_action 清单文件键
pageAction API
页面操作示例
- chill-out