谷歌插件开发学习记录

前言：在之前的实习生活中，使用了不少公司内部的谷歌插件提升工作效率，回忆与组内老大哥的交流中，询问了个人插件开发的难度如何，其表示基础牢固的话，插件开发与前端的基础技术栈是没有冲突的，可以扩展下自己的技术宽度，于是在毕业前夕的闲余生活，抱着学习的心态，记录下自己学习的过程。

我的开发环境：mac+vscode+node（v15.14.0）
仓库地址：https://github.com/hyh-op/googlePlugin

配置manifest.json

manifest.json 清单文件是插件的核心，它定义了插件的元数据和行为。其中包含插件的名称、版本号、描述、图标等信息，还包括了插件的权限和所需的资源文件。

"manifest_version"字段： 2,表示v2版本，不过随着chorme的更新发展，v3版本即将取代v2版本，里面的字段需要一些迁移升级，这里暂时先跟着教程基于v2版本学习，后续手动升级到v3版本，紧随技术发展。
"permissions "字段：插件的权限设置。例如：设置了"permissions": ["tabs"] ，用于授予扩展程序访问浏览器标签页的权限。该权限允许您的扩展程序获取和操作当前窗口或所有窗口中的标签页，并监听标签页的事件（例如打开、关闭等）。
但是需要注意的是，对于某些 API，例如 chrome.tabs.executeScript 和 chrome.tabs.insertCSS，需要在清单文件中显式声明 "activeTab" 权限，以允许您向当前选定的标签页注入脚本或样式表。
除了 "tabs" 权限之外，还有许多其他权限可用于授权您的扩展程序执行特定操作。例如，"storage" 权限用于在扩展程序之间存储和检索数据，"notifications" 权限用于在用户的操作系统上弹出通知，"webRequest" 权限用于监视和修改网络请求，等等。

v2教程链接：https://juejin.cn/post/7231003881751773244

2022年1月份开始不接受新的MV2版本(除了”私人”可见类型)，开发者可以更新已经存在的MV2扩展插件
2022年6月份不接受新的MV2版本，开发者可以更新已经存在的MV2扩展插件
2023年1月份开始，开发者不能更新MV2的扩展插件，MV2也不能在Chrome浏览器运行(除了个别的企业版)
2023年6月份MV2版本将不能在Chrome浏览器运行

background.js

background.js 是一个后台脚本文件，它在插件安装后一直在后台运行，负责处理与浏览器和其他组件的交互、事件处理和数据存储等重要任务。它与前台脚本（即内容脚本）和弹出式窗口脚本共同构成了谷歌插件的完整结构
作为一个后台脚本，会在插件安装后一直在后台运行，即使没有打开插件的弹出式窗口或活动标签页。这使得插件能够在用户不直接与其交互的情况下执行任务和逻辑。。

作用

背景脚本（background.js）在谷歌插件开发中具有极其重要的作用。它可以实现以下功能：

后台数据处理：background.js 可以在后台执行复杂的数据处理和逻辑运算，而不会对用户界面产生任何影响。这使得插件能够处理大量的数据、执行耗时操作，同时保持浏览器的响应性和稳定性。
与浏览器交互：background.js 与浏览器的交互是实现插件核心功能的关键。它可以监听和处理浏览器事件，例如页面加载、标签切换、网络请求等，以实现特定的功能和响应用户的操作。
数据存储和共享：background.js 可以使用谷歌浏览器提供的存储 API，如 chrome.storage，来进行数据的持久化存储和共享。这样，插件可以在不同的页面和会话之间共享数据，提供更一致的用户体验。
与其他组件通信：background.js 可以与其他插件组件，如前台脚本和弹出式窗口脚本，进行通信和消息传递。这使得不同组件之间可以共享数据、调用函数，实现更灵活和复杂的插件功能。

Browser Action API

Browser Action API 是 Google Chrome 扩展平台提供的强大工具，允许开发者在浏览器工具栏中创建自定义按钮和交互界面。

作用

在浏览器工具栏中添加图标
使用 Browser Action API，您可以在浏览器工具栏中添加一个图标，以便用户可以轻松地访问您的扩展程序。该图标可以是静态图片、动态 GIF 或者可以旋转的 SVG 等格式。
处理单击事件
当用户单击浏览器操作按钮时，浏览器会触发 chrome.browserAction.onClicked 事件，并在回调函数中传递当前 tab 对象。您可以在该回调函数中执行任何操作，例如打开扩展程序的 UI 页面、执行脚本、发送消息等。
更改图标和工具提示文本
您可以通过调用 chrome.browserAction.setIcon 和 chrome.browserAction.setTitle 方法来更改浏览器操作按钮的图标和工具提示文本。这使得您可以根据需要动态更改操作按钮的外观和行为。
显示气泡
您可以使用 chrome.browserAction.setBadgeText 和 chrome.browserAction.setBadgeBackgroundColor 方法在浏览器操作按钮上显示一个气泡，以显示扩展程序的状态、未读消息数量等信息。

权限：为了使用 Browser Action API，您需要在扩展程序的 manifest.json 文件中声明 "browser_action" 权限。如果您希望访问当前标签页的 URL 和其他信息，则还需要声明 "tabs" 权限。

Tabs Manager API

Tabs Manager API 允许开发者管理和控制浏览器标签页，提供了强大的功能和灵活性，旨在提升用户的浏览器操作体验。

作用

标签页管理器：可以使用它来创建一个标签页管理器，可以方便地管理和控制浏览器标签页。
标签页截图工具：可以使用它来获取当前标签页的截图，实现一个简单的标签页截图工具。
广告过滤器：可以使用它在标签页中执行 JavaScript 代码，实现一个简单的广告过滤器。
多语言翻译工具：可以使用它来检测标签页的语言，并在标签页中执行 JavaScript 代码，实现一个多语言翻译工具。
自动化测试工具：可以使用它在标签页中执行 JavaScript 代码，实现一个简单的自动化测试工具。

content.js

content.js 作为Chrome浏览器插件中的一个组件，它可以与页面交互并修改DOM元素、注入JavaScript代码等，用于处理特定网页上的内容。
而在插件开发中创建 content.js 文件非常简单，只需要在 manifest.json 文件中定义即可。

作用

与页面进行交互，通过JavaScript语言来改变页面的展示效果或者实现某些特定的功能。
例如，我们可以使用 content.js 在网页上添加新的按钮、文本框、下拉框等控件，以方便用户对网页进行操作。content.js 可以轻松地对DOM元素进行增删改查等操作，例如，在页面上隐藏某些元素、修改文字或颜色等。
content.js 还可以向当前页面注入JavaScript代码，以实现更加复杂的功能。例如，可以通过注入JS脚本，来自动化测试网页、爬取网页数据等。
与后端服务器进行通信，实现更加高级的功能，如检测用户行为、跟踪统计数据等。
例如，我们可以使用 content.js 来获取页面上的一些信息，然后将这些信息发送到后端服务器进行处理，最后返回处理结果并在页面上展示。

Content Script API

Content Script 是一段 JavaScript 代码，可以注入到特定的网页中，与该网页的 DOM 和 JavaScript 环境进行交互。Content Script API 则是用于操作和控制 Content Script 的 API 集合。

作用

修改网页中的内容：可以使用它来修改网页中的文本、样式、DOM 结构等。
注入 JavaScript 代码：可以使用它在网页中注入 JavaScript 代码，实现各种功能和特性。
与后台页面通信：可以使用它与后台页面进行通信，传递数据和消息。
与页面交互：可以使用它与页面进行交互，实现各种操作和功能。

主要方法

chrome.extension.getURL
用于获取插件中的资源文件的URL地址，该方法的作用就是将插件目录下的相对路径转化为完整的URL地址，并返回给调用它的脚本。这样，我们就可以通过该API获取到插件中的任何资源文件，并在网页中进行处理、修改或注入操作。
需要注意的是，Chrome插件的安全机制要求所有的资源文件都必须被明确地列在manifest.json文件的"web_accessible_resources"字段中，否则将无法通过chrome.extension.getURL()方法来访问它们
chrome.runtime.executeScript()
用于在指定的标签页中执行JavaScript代码，它的作用是在指定的标签页中执行一段或多段JavaScript代码。在执行脚本时，我们可以选择将代码直接传递给executeScript方法，也可以将脚本文件路径传递给executeScript方法。在执行完毕后，该API可以返回执行结果（例如，如果脚本有返回值，则会将其传递给回调函数）。
chrome.runtime.insertCSS()
用于向指定的标签页动态注入CSS样式，它的作用是将CSS样式表动态注入到指定的标签页中。我们可以将要注入的CSS样式代码直接传递给该方法，也可以将CSS样式文件的路径传递给该方法。在注入样式后，该API可以返回注入结果。
chrome.tabs.sendMessage()
用于向指定标签页发送消息并接收响应，它的作用是将消息发送到指定标签页，并等待接收响应。在发送消息时，我们可以传递一个包含要发送数据的JavaScript对象，而在接收响应时，则需要提供一个回调函数来处理返回的数据。