5.3 Chrome插件
在本节中，在不写一行代码的情况下，我们会利用ChatGPT和GitHub Copilot编写各种类型的Chrome插件，例如，字典插件、浏览历史记录插件和计算器插件。
5.3.1 字典插件
在本节中，我们实现一个用于搜索字符串的字典插件，如果字符串是英文，就相当于英文字典。这个插件利用了Web版金山词霸的搜索功能，通过金山词霸网站搜索任何字符串。
要搜索的字符串可以是英文，也可以是中文或任何其他文字。这个字典插件在安装时会在Chrome页面的右键菜单中添加一个“翻译”选项，选择“翻译”选项，会新打开一个Chrome标签页，并且将Chrome当前浏览页面中选中的文字传给Web版的金山词霸。
根据对插件功能的描述，可以得出如下关键点。
·在页面的右键菜单中添加一个“翻译”选项。
· 选择“翻译”选项，会打开一个新的标签页。
· 在新的标签页中显示金山词霸的指定页面。
根据这些关键点，可以给ChatGPT提供如下内容。
编写Chrome插件，在浏览器中页面的右键菜单中添加一个选项，选项名为“翻译”，选择该选项，会打开一个新的标签页。在标签页中显示金山词霸网站指定的页面。给出完整的代码和中文注释。
ChatGPT不仅会告诉你如何编写代码，还会告诉你编写Chrome插件的步骤。
1．创建一个目录
首先，要创建一个目录，作为Chrome插件的根目录，本例中的根目录是dict。
2．创建manifest.json文件
在dict目录中，创建一个manifest.json文件，并输入如下内容。
代码位置：src/web/extensions/dict/manifest.json
{
"manifest_version": 2,
"name": "翻译插件",
"version": "1.0",
"description": "在浏览器中页面的右键菜单中添加'翻译'选项",
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "icon16.png",
"48": "icon16.png",
"128": "icon16.png"
},
"manifest_version": 2
}
manifest.json是Chrome扩展程序的清单文件，它描述了扩展程序的属性、权限和功能等信息。当加载扩展程序时，Chrome会读取该文件来了解如何运行和展示扩展程序。
以下是manifest.json文件的一些主要属性。
·manifest_version：定义所使用的manifest文件版本，当前使用的是2，也可以设置为3，这是目前最新的版本。
· name: 扩展程序的名称。
· version: 扩展程序的版本号。
· description: 扩展程序的简要描述。
· permissions: 定义扩展程序所需的权限，例如，contextMenus权限允许扩展程序创建右键菜单。
· background: 定义扩展程序的后台页面和行为，可以指定一个或多个后台脚本文件，并指定是否保持后台页面持续运行。
· icons: 定义扩展程序的图标，包括不同尺寸的图标。
· content_security_policy: 定义内容安全策略，控制扩展程序可以加载的资源和执行的操作，以提高安全性，这个属性在后面的示例中会用到。
这只是manifest.json文件中的一些主要属性，其他属性可以用来配置与定义扩展程序的行为和功能。通过使用不同的属性和值，我们可以根据需要配置扩展程序的各个方面，包括界面、权限、功能和交互等。
注意，manifest_version属性的值为2的情况在未来可能被禁用，所以可以要求ChatGPT给一个manifest_version为3的版本，代码如下所示。
{
"manifest_version": 3,
"name": "翻译插件",
"version": "1.0",
"description": "在浏览器中页面的右键菜单中添加'翻译'选项",
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
3．创建background.js文件
建立一个background.js文件，并输入下面的代码。
代码位置：src/web/extensions/dict/background.js
// 当选择创建的选项时触发的函数
function translateOnClick(info, tab) {
// 获取选中的文本
var selectedText = info.selectionText;
// 将选中的文本编码为URL参数
var encodedText = encodeURIComponent(selectedText);
// 构建要打开的URL
var url = "https://www.iciba.com/word w=" + encodedText;
// 在新标签页中打开URL
chrome.tabs.create({ url: url });
// 创建页面的右键菜单的选项
chrome.contextMenus.create({
id: "translateMenuItem",
title: "翻译",
contexts: ["selection"] // 只在选中文本时显示选项
});
chrome.contextMenus.onClicked.addListener(translateOnClick);
background.js文件是Chrome扩展程序中的后台脚本文件（可以是任何文件，需要通过manifest.json文件的service_worker属性指定），它负责处理扩展程序的后台逻辑和事件。
background.js文件有如下几种用途。
·监听事件：background.js可以注册事件监听器，以便在特定事件发生时执行相应的逻辑，例如，可以监听浏览器标签页的创建、更新或关闭事件，以对其进行操作或记录相关信息。
· 处理请求：background.js可以处理来自其他部分（如浏览器动作按钮、选项页面或内容脚本）的请求，它可以根据请求的内容执行相应的操作，并返回结果或发送消息给其他部分。
· 与外部服务交互：background.js可以与外部服务进行通信，例如，通过HTTP请求与API进行数据交换；它可以处理与服务器的通信，获取所需的数据或执行相应的操作。
· 持久性存储数据：background.js可以使用Chrome扩展程序的存储API（如chrome.storage）来存储和读取扩展程序的持久性数据，这样可以在不同的会话中保留数据，并在需要时进行访问和更新。
· 与其他组件协调：background.js可以作为扩展程序中各个组件之间的中心调度器，协调它们的工作和通信；它可以接收来自其他组件的消息、指令或请求，并相应地调用适当的功能。
注意，由于引入manifest版本3，因此Chrome扩展程序的后台逻辑发生了一些改变。在manifest版本3中，建议使用Service Worker来替代以前的后台页面。因此，background.js文件可能会被转换为一个Service Worker脚本，以提供类似的后台功能和事件处理能力。
总之，background.js文件在Chrome扩展程序中扮演着重要的角色，它处理与后台逻辑相关的任务和事件，协调各个组件的工作，并提供与外部服务的交互能力。
4．安装和使用插件
安装字典插件的步骤如下。
（1）在Chrome浏览器的地址栏中输入“chrome://extensions”，并按Enter键，进入扩展程序页。
（2）在“扩展程序”页面的右上角，打开“开发者模式”。
（3）单击“加载已解压的扩展程序”按钮，选择包含插件文件的文件夹（本例是dict目录）。
（4）右击选中的文本，若在弹出的菜单中出现一个“翻译”选项，如图5-9所示，则说明字典插件安装成功。
到现在为止，已经完成了字典插件的安装，在扩展程序页会看到图5-10所示的字典插件展示页。
现在可以找一个包含文字的页面，最好选带英文的，然后在页面上选中某个单词，在页面的右键菜单中选择“翻译”选项，就会新创建一个标签页，并搜索选中的英文单词，如图5-11所示。
图5-9 安装字典插件
图5-10 字典插件展示页
图5-11 通过字典插件搜索英文单词
毕竟使用新建的标签页切换起来不方便，不如新弹出一个页面，用于显示搜索结果。在background.js文件中，找到如下代码。
chrome.tabs.create({ url: url });
在这行代码后面，输入如下注释。
// 弹出一个新的窗口，显示URL
不断按Enter键和Tab键，GitHub Copilot会自动生成相关的代码，如下所示。
chrome.windows.create({
type: "popup",
width: 1200,
height: 800,
url: url
});
现在搜索页面中选中的英文单词，就会新弹出一个窗口，用于显示搜索结果，如图5-12所示。
图5-12 在新弹出的窗口中显示搜索结果
