二次元绘画创作
56.21M · 2026-02-04
作为一名前端开发者，你是否想过自己开发一个Chrome浏览器插件？今天我就来教大家如何使用 Trae AI 快速生成一个简单但实用的Chrome扩展程序——Hulk，它能让任意网页的背景瞬间变绿！
Hulk插件的功能非常简单直观：
虽然功能简单，但这个项目涵盖了Chrome插件开发的核心概念，非常适合入门学习！
在开始之前，你需要准备：
green_land/
├── manifest.json # 插件配置文件
├── popup.html # 弹出窗口界面
├── popup.css # 弹出窗口样式
├── popup.js # 弹出窗口逻辑
├── content.js # 内容脚本（注入到网页）
└── icons/ # 插件图标
├── icon16.png
├── icon48.png
└── icon128.png
{
"manifest_version": 3,
"name": "Hulk",
"version": "1.0",
"description": "Change the background color of the current page to green",
"permissions": [
"activeTab",
"scripting"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
关键点说明：
manifest_version: 3 - 使用最新的Manifest V3规范permissions - 声明需要的权限，activeTab和scripting用于操作当前标签页action - 定义插件图标点击后的行为<!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>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<h1>改变背景颜色</h1>
<p>点击下方按钮将当前页面背景色改为绿色</p>
<button id="changeColorBtn">改变颜色</button>
</div>
<script src="popup.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function() {
const changeColorBtn = document.getElementById('changeColorBtn');
changeColorBtn.addEventListener('click', async function() {
try {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (tab) {
await chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['content.js']
});
}
} catch (error) {
console.error('Error executing script:', error);
}
});
});
核心逻辑：
chrome.scripting.executeScript注入content脚本document.body.style.backgroundColor = '#4CAF50';
这一行代码就是整个插件的核心——将页面背景设置为绿色！
在Trae中输入以下需求描述：
你是一个经验丰富的Chrome 扩展程序开发者，请帮我开发一个名为Hulk的扩展程序。
UX 设计图参考ux.png。
具体交互步骤如下：
Step1：点击程序图标打开弹出窗口，在窗口中默认提示："改变背景颜色"、"点击下方按钮将当前页面背景色改为绿色"和一个"改变颜色"按钮。
Step2：点击按钮，网页背景改变为绿色。
注意以下：
请使用icons文件夹的图标作为应用程序的图标
Trae AI会根据你的需求自动生成所有必要的文件：
chrome://extensions/打开任意网页，保持原始背景色。
点击插件图标 → 点击"改变颜色"按钮 → 网页背景瞬间变为清新的绿色
chrome.tabs.query() - 查询标签页信息chrome.scripting.executeScript() - 注入脚本到页面chrome.action - 插件操作相关API如果你想进一步完善这个插件，可以考虑：
Q: 为什么我的插件没有生效？ A: 检查以下几点：
Q: 可以改变其他样式吗？ A: 当然可以！修改content.js中的代码即可操作页面任何CSS属性。
Q: Manifest V2还能用吗？ A: Chrome已逐步弃用V2，建议新项目直接使用V3。
通过这个简单的Hulk插件项目，我们学习了：
Trae AI的优势：
Chrome插件开发其实并不复杂，关键在于理解其架构和API。借助Trae AI这样的AI工具，我们可以更专注于创意和逻辑实现，而不是纠结于基础代码的编写。
希望这篇教程对你有帮助！如果你有任何问题或建议，欢迎在评论区交流讨论
参考资源：
点攒 + 收藏⭐ + 关注️，获取更多前端开发干货！
