在日常的开发和浏览过程中，我们常常会有一些个性化的需求，比如快速获取页面特定信息、自动填充表单等。为了满足这些需求，我借助 AI 工具开发了一款谷歌浏览器插件。下面就为大家详细介绍开发过程，在需要图表图片代码展示的地方我会特别说明。
一、开发前的准备
明确插件功能
首先要确定插件的功能，我开发的这款插件主要用于在浏览网页时，自动提取当前页面的标题、关键词，并将其保存到本地，方便后续整理和查阅。
开发环境搭建
开发谷歌浏览器插件需要的环境很简单，只需要安装谷歌浏览器和一款代码编辑器（如 VS Code）即可。这里应该有一张展示开发环境的截图，左侧是 VS Code 编辑器，右侧是谷歌浏览器。
二、插件的核心文件
谷歌浏览器插件主要由以下几个核心文件组成：
manifest.json：插件的配置文件，用于指定插件的名称、版本、权限、所需的资源文件等。
popup.html：插件点击后弹出的页面的 HTML 结构。
content.js：用于操作当前浏览页面的脚本。
background.js：插件的后台脚本，用于处理一些后台任务和事件监听。
这里应该有一张插件文件结构的示意图，清晰展示各个文件之间的关系。
三、开发过程详解
编写 manifest.json 文件
manifest.json是插件的入口文件，谷歌浏览器通过它来识别和加载插件。以下是该文件的代码：
| { "manifest_version": 3, "name": "页面信息提取插件", "version": "1.0", "description": "自动提取页面标题和关键词并保存", "permissions": ["activeTab", "storage"], "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ], "background": { "service_worker": "background.js" } } |
在manifest.json中，manifest_version指定了 manifest 的版本，目前推荐使用版本 3；permissions声明了插件需要的权限，activeTab允许插件临时访问当前活动标签页，storage允许插件使用本地存储；content_scripts指定了注入到网页中的脚本。这里应该有一张对manifest.json关键配置项进行说明的图表。
开发 popup.html 及相关脚本
popup.html是插件点击后弹出的页面，用于展示提取到的信息和提供操作按钮。代码如下：
| <!DOCTYPE html> <html> <head> <style> body { width: 300px; padding: 10px; } .info { margin-bottom: 10px; } button { background-color: #4CAF50; color: white; border: none; padding: 5px 10px; cursor: pointer; } </style> </head> <body> <div class="info"> <h3>页面标题：</h3> <p id="title"></p> </div> <div class="info"> <h3>关键词：</h3> <p id="keywords"></p> </div> <button id="saveBtn">保存信息</button> <script src="popup.js"></script> </body> </html> |
popup.js用于处理 popup 页面的逻辑，如获取页面信息并展示、处理保存按钮的点击事件等。代码如下：
| // 获取当前活动标签页 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { // 向content.js发送消息，请求获取页面信息 chrome.tabs.sendMessage(tabs[0].id, {action: "getPageInfo"}, function(response) { document.getElementById("title").textContent = response.title; document.getElementById("keywords").textContent = response.keywords; }); }); // 保存按钮点击事件 document.getElementById("saveBtn").addEventListener("click", function() { const title = document.getElementById("title").textContent; const keywords = document.getElementById("keywords").textContent; // 将信息保存到本地存储 chrome.storage.local.set({[new Date().toISOString()]: {title, keywords}}, function() { alert("保存成功！"); }); }); |
这里应该有一张 popup 页面的效果图，展示页面的布局和样式。
开发 content.js 脚本
content.js用于在网页加载完成后，提取页面的标题和关键词，并响应来自 popup.js 的消息。代码如下：
| // 提取页面标题和关键词 function getPageInfo() { const title = document.title; // 简单提取meta标签中的关键词，实际应用中可以根据需求优化 const metaKeywords = document.querySelector('meta[name="keywords"]'); const keywords = metaKeywords ? metaKeywords.content : "无关键词"; return {title, keywords}; } // 监听来自popup.js的消息 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action === "getPageInfo") { sendResponse(getPageInfo()); } }); |
这里可以有一张展示脚本在网页中运行并提取信息的示意图。
开发 background.js 脚本
background.js作为后台脚本，主要用于处理一些全局事件，这里我们暂时只做简单的初始化。代码如下：
| // 插件安装时的初始化操作 chrome.runtime.onInstalled.addListener(function() { console.log("插件安装成功！"); }); |
四、插件的测试与调试
加载插件到谷歌浏览器
打开谷歌浏览器，在地址栏输入chrome://extensions/，进入扩展程序页面。
开启右上角的 “开发者模式”。
点击 “加载已解压的扩展程序”，选择插件所在的文件夹，即可加载插件。这里应该有一张加载插件过程的截图。
调试方法
对于popup.html和popup.js，可以右键点击插件图标，选择 “检查”，打开开发者工具进行调试。
对于content.js，可以在当前浏览的网页中按 F12 打开开发者工具，在 “Sources” 面板中找到content.js进行调试。
对于background.js，可以在扩展程序页面找到插件，点击 “背景页”（对于 manifest v3 是 “service worker”）打开对应的开发者工具进行调试。这里应该有一张调试界面的截图。
五、总结
通过 AI 的辅助，我们顺利完成了这款谷歌浏览器插件的开发。从明确功能、搭建环境，到编写各个核心文件，再到测试调试，每一步都离不开对谷歌浏览器插件开发规范的遵循。这款插件虽然简单，但涵盖了插件开发的基本流程和核心技术点。
希望以上的开发过程详解能对大家有所帮助，如果你也有开发浏览器插件的想法，不妨动手尝试一下。在深度学习过程中，电脑跑不动需要云租服务器的话，可以从性价比、易用、稳定三个方向来找。 七月份易嘉云平台yijiacloud，有活动可以免费使用算力，新用户注册给50算力金，够跑24小时4080，需要的话可以去薅。
发布评论