谷歌插件开发：Browser Action API 详解（手把手带你从零探索开发谷歌插件）

我正在参加「掘金·启航计划」

本节将深入介绍 Google 插件的进阶特性之一：Browser Action API。Browser Action API 是 Google Chrome 扩展平台提供的强大工具，允许开发者在浏览器工具栏中创建自定义按钮和交互界面。本节将详解 Browser Action API 的使用流程和核心概念，让您能掌握创建强大扩展的技能。通过阅读本节，您将了解 Browser Action API 的基本概念、作用和重要性，以及它的运行方式和可配置项。

---

课程目录（暂定18节）

后续可持续关注此贴，目录路径都会补上，点击即可跳转前往

1. 序章：拓展技术池，一起来探索谷歌插件吧！
2. 插件结构：manifest.json 配置文件详解
3. 实战开发：创建自己的第一个Google插件
4. 插件结构：background.js 文件详解
5. 进阶高级：Browser Action API 详解
6. 进阶高级：Tabs Manager API 详解
7. 谷歌插件开发：content.js 文件详解
8. 谷歌插件开发：Content Script API 详解
9. 谷歌插件开发：Message Passing API 详解
10. 谷歌插件开发：Storage API 详解
11. 谷歌插件开发：File System Access API 详解
12. 谷歌插件开发：XMLHttpRequest 详解
13. 进阶高级：Bookmarks API 详解
14. 进阶高级：Downloads API 详解
15. 进阶高级：如何使用vue来开发一款Google插件
16. 实战开发：从零开发一款企业级Google插件（上）
17. 实战开发：从零开发一款企业级Google插件（下）
18. 收官之作：总结与展望

一. 基本介绍

在开始深入研究 Browser Action API 之前，让我们先了解一些基本概念。Browser Action 是一种扩展类型，允许开发者在浏览器工具栏中创建一个按钮，用户可以点击来与插件进行交互。这个按钮是固定在浏览器工具栏上的，无论用户在哪个网页，都可以轻松访问插件的功能。Browser Action API 提供了一系列方法和事件，用于管理和控制这个按钮的行为和外观。

简单来说就是它允许您在浏览器工具栏中添加一个图标，以便用户可以通过单击按钮打开扩展程序的 UI 页面、执行某些操作或查看扩展程序的状态等。

Browser Action API 是基于事件驱动的。当用户与插件按钮进行交互时，浏览器会触发相应的事件，然后插件可以通过添加事件监听器来响应这些事件。

接下来，让我们使用 Browser Action API 来创建自己的自定义按钮。

简单演示

首先，我们需要创建一个新的插件项目。在项目文件夹中，我们需要包含一个清单文件（manifest.json）和一个 HTML 文件，用于定义插件的行为和外观。

在清单文件中，我们需要添加以下字段来配置 Browser Action：

"browser_action": {
  "default_icon": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "default_popup": "popup.html",
  "default_title": "My Extension"
}

在上面manifest.json文件的配置中，我们就已经定义好了插件按钮的默认图标、弹出窗口和标题。

作用

在实际开发场景中，我们可以使用 Browser Action API 来实现以下功能，例如：

(1) 在浏览器工具栏中添加图标

使用 Browser Action API，您可以在浏览器工具栏中添加一个图标，以便用户可以轻松地访问您的扩展程序。该图标可以是静态图片、动态 GIF 或者可以旋转的 SVG 等格式。

(2) 处理单击事件

当用户单击浏览器操作按钮时，浏览器会触发 chrome.browserAction.onClicked 事件，并在回调函数中传递当前 tab 对象。您可以在该回调函数中执行任何操作，例如打开扩展程序的 UI 页面、执行脚本、发送消息等。

(3) 更改图标和工具提示文本

您可以通过调用 chrome.browserAction.setIcon 和 chrome.browserAction.setTitle 方法来更改浏览器操作按钮的图标和工具提示文本。这使得您可以根据需要动态更改操作按钮的外观和行为。

(4) 显示气泡

您可以使用 chrome.browserAction.setBadgeText 和 chrome.browserAction.setBadgeBackgroundColor 方法在浏览器操作按钮上显示一个气泡，以显示扩展程序的状态、未读消息数量等信息。

通过 Browser Action API，开发者可以自定义按钮的外观和交互元素，使其与插件的整体风格相匹配。可以通过 CSS 样式表设置按钮的样式，设置按钮的图标、背景色等属性。开发者还可以添加按钮上的菜单、下拉框、文本框等交互元素，以提供更多的操作和选择方式。

需要注意的事项 ⚠️

1. 权限：为了使用 Browser Action API，您需要在扩展程序的 manifest.json 文件中声明 "browser_action" 权限。如果您希望访问当前标签页的 URL 和其他信息，则还需要声明 "tabs" 权限。
2. 图标大小和格式：建议使用不同尺寸和分辨率的图标来适应不同的浏览器和设备。通常建议使用 PNG 格式的图标，并根据需要生成不同大小的版本。
3. 响应速度：在处理单击事件时，请注意保持响应迅速和流畅。如果需要执行耗时的任务，建议使用异步请求或 Web Worker 等技术来避免阻塞 UI 线程。

通过 Browser Action API，开发者可以为插件添加工具栏图标、弹出菜单等功能，提高插件的可用性和用户体验。它的作用是提高插件的可用性和用户体验。通过为插件添加工具栏图标和弹出菜单，用户可以更方便地使用插件的功能。通过设置提示信息和角标等，可以让用户更加清楚地了解插件的状态和功能。

同时，Browser Action API 还可以为插件添加动态效果，使插件更加生动、有趣，吸引用户的注意力。

Browser Action API 主要提供了以下内容：

字段名	描述
chrome.browserAction.onClicked	用于添加单击事件监听器
chrome.browserAction.setIcon	设置工具栏图标
chrome.browserAction.setTitle	设置工具栏提示信息
chrome.browserAction.getTitle()	获取工具栏提示信息
chrome.browserAction.setPopup()	设置弹出菜单页面
chrome.browserAction.getPopup()	获取当前弹出菜单页面
chrome.browserAction.disable()	禁用工具栏图标和菜单
chrome.browserAction.enable()	启用工具栏图标和菜单
chrome.browserAction.setBadgeText	设置工具栏图标的角标
chrome.browserAction.setBadgeBackgroundColor	设置工具栏图标的角标背景颜色

二. 主要方法

1. chrome.browserAction.onClicked

chrome.browserAction.onClicked 方法用于添加单击事件监听器。当用户单击浏览器操作按钮时，该事件将被触发，并在回调函数中传递当前标签页对象。

该方法可以用于处理以下功能：

1. 打开扩展程序的 UI 界面：通过单击浏览器操作按钮，用户可以轻松地访问扩展程序的 UI 界面。这通常用于显示设置、选项、历史记录等信息。
2. 执行脚本：您可以在单击浏览器操作按钮时执行特定的 JavaScript 脚本。这可以用于自动化某些任务、快速检查页面元素等。
3. 向扩展程序发送消息：您可以使用 chrome.runtime.sendMessage 方法向扩展程序发送消息，并从回调函数中接收响应。这使得您可以在扩展程序和浏览器之间进行双向通信。

但是需要注意的是，当处理 chrome.browserAction.onClicked 事件时，请确保保持响应迅速和流畅。如果需要执行耗时的任务，建议使用异步请求或 Web Worker 等技术来避免阻塞 UI 线程。同时，还需要注意浏览器兼容性，不同的浏览器可能具有不同的行为和支持程度。因此，在开发扩展程序时，建议测试您的代码在各种不同类型的浏览器上的兼容性。

2. chrome.browserAction.setIcon

chrome.browserAction.setIcon 方法用于更改浏览器操作按钮的图标。您可以向该方法传递一个包含图标路径和尺寸的对象，以更改浏览器操作按钮的外观。

一般来说，该方法可用于处理以下功能：

1. 显示扩展程序的状态：通过更改浏览器操作按钮的图标，可以显示扩展程序的状态，例如未读消息数量、当前下载的文件数量等。
2. 更改浏览器操作按钮的外观：如果需要根据某些条件动态更改浏览器操作按钮的外观，则可以使用 chrome.browserAction.setIcon 方法。例如，在某些情况下，您可能希望将浏览器操作按钮设置为红色或绿色等。

需要注意的是，建议使用不同尺寸和分辨率的图标来适应不同的浏览器和设备。通常建议使用 PNG 格式的图标，并根据需要生成不同大小的版本。此外，如果需要在图标的尺寸发生变化时动态更新图标，则需要在 manifest.json 文件中声明 "icons" 数组，并指定多个不同尺寸的图标路径。

3. chrome.browserAction.setTitle

chrome.browserAction.setTitle 方法用于更改浏览器操作按钮的工具提示文本。您可以向该方法传递一个字符串来更新浏览器操作按钮的工具提示文本。

一般来说，该方法可用于处理以下功能：

1. 提供额外的信息：通过更改浏览器操作按钮的工具提示文本，可以为用户提供有关扩展程序的更多信息，例如当前状态、功能描述等。
2. 更改浏览器操作按钮的外观：如果需要根据某些条件动态更改浏览器操作按钮的外观，则可以使用 chrome.browserAction.setTitle 方法。例如，在某些情况下，您可能希望将浏览器操作按钮设置为红色或绿色等，并在工具提示文本中显示相应的信息。

需要注意的是，当更改浏览器操作按钮的工具提示文本时，请确保只提供必要的信息，并避免过度使用。如果提示文本太长或太复杂，则可能会干扰用户的浏览体验。同时，建议定期检查和更新工具提示文本，以确保其与扩展程序的实际功能和状态保持一致。

4. chrome.browserAction.setBadgeText

chrome.browserAction.setBadgeText 方法用于在浏览器操作按钮上显示一个气泡。您可以向该方法传递一个字符串来显示扩展程序的状态、未读消息数量等信息。

一般来说，该方法可用于处理以下功能：

1. 显示扩展程序的状态：通过在浏览器操作按钮上显示气泡，可以快速向用户传达扩展程序的当前状态，例如正在运行、已停止等。
2. 显示未读消息数量：如果您的扩展程序涉及到消息通知或邮件收件箱等功能，则可以使用 chrome.browserAction.setBadgeText 方法，在浏览器操作按钮上显示未读消息数量。

需要注意的是，如果气泡中显示的文本太长或太复杂，则可能会干扰用户的浏览体验。

5. chrome.browserAction.setBadgeBackgroundColor

chrome.browserAction.setBadgeBackgroundColor 方法用于更改浏览器操作按钮上气泡的背景颜色。您可以向该方法传递一个包含红、绿、蓝（RGB）值的对象，以更改气泡的背景颜色。

一般来说，该方法可用于处理以下功能：

1. 标识不同类型的消息：通过更改气泡的背景颜色，可以快速区分不同类型的消息，例如错误、警告和信息等。
2. 提高可读性：如果气泡中的文本与背景颜色相似，则可能会影响用户的可读性。因此，您可以使用 chrome.browserAction.setBadgeBackgroundColor 方法设置一个对比度较高的背景颜色，以提高文本的可读性。

通过使用这些API，您可以轻松地创建一个浏览器操作按钮，并实现一些有用的功能，例如处理单击事件、更改图标和工具提示文本、显示气泡等。同时，需要注意权限的声明、图标的大小和格式、响应速度、浏览器兼容性等问题，以创建出色的扩展程序，并为用户提供更好的使用体验。

---

三. 应用示例

根据 Browser Action API 提供的 API，我们来实现一个简易的 Google 插件：当用户单击浏览器操作按钮时，在新标签页中打开 Google 搜索页面。

我们先在扩展程序根目录下创建 manifest.json 文件，并添加以下配置：

{
  "manifest_version": 2,
  "name": "Google Search",
  "version": "1.0",
  "description": "A simple Google search extension",
  "permissions": [
    "tabs",
    "browser_action"
  ],
  "browser_action": {
    "default_icon": {
      "16": "icon/icon16.png",
      "48": "icon/icon48.png",
      "128": "icon/icon128.png"
    },
    "default_title": "Search with Google",
    "default_popup": "popup.html"
  }
}

然后创建 popup.html 文件，并添加以下配置已实现交互窗口：

<!DOCTYPE html>
<html>

  <head>
    <title>Google Search</title>
    <script src="popup.js"></script>
  </head>

  <body>
    <button id="searchButton">Search with Google</button>
  </body>

</html>

再创建 popup.js 文件，配置如下：

document.addEventListener('DOMContentLoaded', function () {
  var searchButton = document.getElementById('searchButton');
  searchButton.addEventListener('click', function () {
    chrome.tabs.create({ url: 'https://www.google.com/' });
  });
});

chrome.browserAction.setIcon({ path: 'icon128.png' });

chrome.browserAction.setTitle({ title: 'Search with Google' });

在上面的示例中，我们首先声明了 "browser_action" 权限，并指定了默认的图标、工具提示文本和弹出窗口。然后，我们创建了一个名为 popup.html 的 HTML 页面，并将其指定为操作按钮的默认弹出窗口。在 JavaScript 代码中，我们添加了 chrome.browserAction.onClicked 事件监听器，并在回调函数中使用 chrome.tabs.create 方法创建一个新标签页并打开 Google 搜索页面。最后，我们使用 chrome.browserAction.setIcon 方法添加一个图标，并使用 chrome.browserAction.setTitle 方法添加工具提示文本。

当用户单击浏览器操作按钮时，插件将在新标签页中打开 Google 搜索页面。这是一个简单的示例，您可以根据自己的需求进行相应的修改和扩展。

下面我们来看一下功能的实现情况：

---

本节我们深入介绍了 Google 插件的进阶特性之一：Browser Action API。我们首先了解了 Browser Action API 的基本概念，然后逐步介绍了它的作用和重要性、运行方式以及可配置项。Browser Action API 提供了强大的工具和灵活的配置选项，使开发者能够创建出功能丰富、用户友好的插件按钮。

通过掌握 Browser Action API，您可以创建自定义的插件按钮，并提供快速访问功能、增强用户体验，以及增加插件的可定制性。您可以根据插件的需求，自定义按钮的图标、弹出窗口，添加事件监听器和右键菜单，以及配置快捷键，为用户提供更好的使用体验。

---

本节课程源码 📥

链接: pan.baidu.com/s/1cTgArNHM… 提取码: 2222