引言
在浏览器拓展的世界里，Chrome 扩展凭借其丰富的功能和强大的定制性，深受广大用户和开发者喜爱。今天，我将带领大家借助 Trae AI 的助力，开发一款名为 Hulk 的 Chrome 扩展程序，实现改变网页背景颜色的有趣功能。让我们一起开启这段充满创意与技术的旅程吧！
首先，我们来一遍手敲（邪恶），来看看传统怎么写...
一、开发前的准备
确保你已经安装了 Chrome 浏览器，因为我们开发的扩展是基于 Chrome 环境运行的。同时，你需要对 HTML、CSS 和 JavaScript 有基本的了解，这是开发 Chrome 扩展的基础语言。
二、创建项目文件结构
首先，我们要搭建项目的文件结构，在本地创建一个名为 hulk 的文件夹（名字可自定义），在这个文件夹下再创建以下几个文件和文件夹：
icons文件夹：用于存放扩展的图标，我们准备icon16.png、icon48.png和icon128.png三种不同尺寸的图标，分别对应不同场景下的展示需求。manifest.json：这是 Chrome 扩展的核心配置文件，它定义了扩展的基本信息、权限和功能。popup.html：用来定义点击扩展图标后弹出窗口的 HTML 结构。popup.js：此 JavaScript 文件负责处理弹出窗口中按钮的点击事件，并向当前标签页发送消息以改变背景颜色。content.js：该文件用于在网页中执行实际的背景颜色更改操作。- 此时，项目的文件结构如下：
三、编写核心代码
1. manifest.json 配置
{
"manifest_version": 3,
"name": "Hulk",
"version": "1.0",
"description": "改变网页背景颜色的 Chrome 扩展",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"permissions": ["activeTab"]
}
小 tips：manifest_version 设置为 3 代表遵循 Chrome 扩展的最新规范。name 是扩展名称，version 为版本号，description 是对扩展功能的简要描述。action 定义了扩展图标点击后的弹出窗口和默认图标。permissions 声明了扩展所需权限，这里 "activeTab" 用于获取当前活动标签页，"scripting" 是 MV3 中注入脚本所需权限。content_scripts 部分则将 content.js 注入到所有网页中。
2. popup.html 页面结构
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变背景颜色</title>
</head>
<body>
<p>改变背景颜色</p>
<p>点击下方按钮将当前页面背景色为红色</p>
<button id="changeColorButton">改变背景颜色</button>
<script src="popup.js"></script>
</body>
</html>
小 tips:这是一个简单的 HTML 页面，定义了弹出窗口的标题，以及说明文字和一个按钮，通过 <script> 标签引入 popup.js 来实现交互功能。
3. popup.js 交互逻辑
document.addEventListener('DOMContentLoaded', function() {
const changeColorButton = document.getElementById('changeColorButton');
changeColorButton.addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {action: 'changeBackgroundColor', color: 'red'});
});
});
});
小 tips:代码在 DOM 加载完成后，获取按钮元素并添加点击事件监听器。点击按钮时，通过 chrome.tabs.query 获取当前活动标签页，再利用 chrome.tabs.sendMessage 向该标签页发送消息，告知要执行改变背景颜色的操作，且颜色为红色。
4. content.js 颜色更改
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'changeBackgroundColor') {
document.body.style.backgroundColor = request.color;
}
});
小 tips:这里通过监听消息，当接收到 changeBackgroundColor 动作的消息时，将网页的 body 元素背景颜色设置为消息中指定的颜色。
四、安装与测试扩展
- 打开 Chrome 浏览器，在地址栏输入
chrome://extensions并回车，进入扩展程序管理页面。 - 开启 “开发者模式”，页面左上角会出现相关按钮，点击即可开启。
- 点击 “加载已解压的扩展程序” 按钮，在弹出的文件选择框中，找到我们之前创建的
hulk文件夹并选中，点击 “确定”。 - 此时，你会在扩展程序列表中看到名为 “Hulk” 的扩展，点击其图标，弹出窗口出现，点击 “改变背景颜色” 按钮，当前网页的背景颜色就会变为红色啦。
可是当我们点击按钮后，却发现背景颜色没有任何变化，这是怎么回事呢？ 让我们回到扩展程序页面：
chrome://extensions,看到我们导入的扩展程序出现以下错误：
我们点进去查看详情：
将这段错误交给我们的AI大大！
AI大大给我们答疑啦：
根据错误信息 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. ，这通常是由于 content.js 文件未正确加载或未在 manifest.json 中声明导致的。以下是修复后的代码：
{
"manifest_version": 3,
"name": "Hulk",
"version": "1.0",
"description": "改变网页背景颜色的 Chrome 扩展",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
经过这样修改，我们重新回到扩展程序，重新添加Hulk扩展程序，再回到页面，背景色红啦！！
可是......
有些小伙伴觉得自己手搓太累了（懒人在此（））
没关系！！我们有更方便的方法供小伙伴们偷懒(bushi)
不要眨眼睛哦~接下来我们要用Trae来体验全新的代码之旅...
只需要在文件夹下面创建一个txt文件：instrustion.txt ,将我们的需求写进去：
你是一个经验丰富的chrome扩展开发者。请帮我开发一个名为Hulk的扩展应用。
ux设计图请参考ux.png。
具体交互步骤如下：
Step 1: 点击程序图标打开弹出窗口，在窗口中显示默认提示：
“改变背景颜色”、“点击下方按钮将当前页面背景色为红色” 和一个
“改变背景颜色”按钮
Step 2: 点击按钮，网页背景改变为红色
注意以下两点：
请使用icons文件夹的图标作为应用程序的图标
再打开右侧栏的AI大大，输入以下需求：
此时，AI大大会给我们写好所有的文件，像这样：
我们点击右上角的应用，再确认接受即可，它会自动帮我们生成好所有需要的代码文件！！！
效果和手搓一毛一样！！！
是不是特别方便？？？
通过本次借助 Trae AI 开发 Chrome 扩展的实践，我们不仅掌握了基本的扩展开发流程，也看到了 AI 在辅助开发中的强大潜力。赶紧动手试试，开发出更多有趣又实用的浏览器扩展吧！
