引言
在当今的软件开发领域，AI 技术的应用已经越来越广泛。作为一名开发者，借助 AI 可以极大地提高开发效率，尤其是在开发 Chrome 扩展这类项目时。本文将结合实际项目，分享如何使用 Trae AI 开发名为 Hulk 的 Chrome 扩展，包括设置插件改变背景颜色的实现过程，以及如何用 Trae 编写代码注释。
项目背景
我们的需求是开发一个名为 Hulk 的 Chrome 扩展，功能是点击扩展图标弹出窗口，窗口中显示提示信息和按钮，点击按钮后将当前网页的背景颜色改为绿色。同时，要求使用 icons 文件夹中的图标作为应用程序图标。详细需求记录在 instruction.txt 中。
如何让AI帮你写项目
- 首先创建一个
instruction.txt文件 - 给一个身份， 像人一样思考： 你是一个经验丰富的chrome扩展开发者。请帮我开发一个名为Hulk的扩展应用。 ux设计图请参考ux.png。
- 给个具体的任务，细化流程，清晰准确： 具体交互步骤如下： Step 1: 点击程序图标打开弹出窗口，在窗口中显示默认提示： “改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” 和一个 “改变背景颜色”按钮 Step 2: 点击按钮，网页背景改变为绿色
- 遵守什么规则，（不要做什么）： 注意以下两点： 请使用icons文件夹的图标作为应用程序的图标
- 在
instruction.txt文件中写好需求后，我们就可以让AI帮忙写代码啦： 在右侧的AI侧栏中输入'#'便可以选中你想要的文件
然后点击发送，将AI写好的代码一个个点击“应用”、“接受”即可。
项目结构
于是，项目的主要文件和文件夹结构如下：
d:/lesson_si/
├── aigc/
│ └── hulk/
│ ├── content.js
│ ├── icons/
│ │ └── icon16.png
│ ├── instruction.txt
│ ├── manifest.json
│ ├── popup.html
│ └── popup.js
└── readme.md
各文件功能及实现
1. manifest.json
manifest.json 是 Chrome 扩展的核心配置文件，定义了扩展的基本信息、权限和入口文件。
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"]
}]
}
这个文件告诉 Chrome 浏览器扩展的名称、版本、弹出窗口和图标等信息，同时声明了需要的权限和内容脚本。
2. popup.html
popup.html 是弹出窗口的 HTML 文件，负责显示提示信息和按钮。
popup.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Hulk</title>
</head>
<body>
<p>改变背景颜色</p>
<p>点击下方按钮将当前页面背景颜色为绿色</
p>
<button id="changeColorButton">改变
背景颜色</button>
<script src="popup.js"></script>
</body>
</html>
用户点击扩展图标后，会看到这个弹出窗口，其中的按钮是触发背景颜色改变的入口。
3. popup.js
popup.js 负责处理弹出窗口的交互逻辑，当点击按钮时，向当前激活的标签页发送消息。
popup.js
/**
* @desc 页面背景切换
* @author pp
* @data 2024-06-20 16:21:35
*/
// JS面向对象 语言
// 事件监听
// 弹窗加载完后
document.addEventListener
('DOMContentLoaded', function() {
const changeColorButton = document.
getElementById('changeColorButton');
changeColorButton.addEventListener
('click', function() {
chrome.tabs.query({active:
true, currentWindow: true},
function(tabs) {
if (tabs[0].id) {
chrome.tabs.sendMessage
(tabs[0].id, {action:
"changeBackgroundColor"}
,
() => chrome.
runtime.
lastError); // 处理
连接错误
}
});
});
});
收起代码
这里的注释清晰地说明了代码的功能和编写信息，使用 Trae 编写注释时，可以根据代码的功能和上下文，用简洁明了的语言描述代码的作用、作者和编写时间等信息。
4. content.js
content.js 用于接收来自 popup.js 的消息，并将页面背景颜色改为指定颜色。
content.js
chrome.runtime.onMessage.addListener
(function(request, sender,
sendResponse) {
if (request.action ===
"changeBackgroundColor") {
document.body.style.
backgroundColor = "green";
}
});
当接收到 changeBackgroundColor 消息时，将页面的背景颜色设置为绿色。
5. 图标文件
icon16.png 是扩展的图标文件，在 manifest.json 中被引用。虽然无法直接查看图片内容，但从配置文件可以知道它在扩展中的作用。
结果
在Chrome浏览器中加载未打包的扩展程序：打开 chrome://extensions/ ，启用“开发者模式”，点击“加载已解压的扩展程序”，选择 d:/lesson_si/aigc/hulk 文件夹
接下来就是见证奇迹的时刻：
总结
本次开发，我们成功借助 Trae AI 开发了名为 Hulk 的 Chrome 扩展，实现了改变网页背景颜色的功能。在开发过程中，AI 帮助我们快速生成代码和注释，大大提高了开发效率。同时，合理的项目结构和清晰的代码注释也让项目的维护更加方便。希望本文能对大家开发 Chrome 扩展有所帮助。
如果你对本次开发有任何疑问或者建议，欢迎在评论区留言讨论。
