皮卡皮卡~，小白也能用AI开发Chrome插件来更改背景图片皮卡皮卡~，小白也能用AI开发Chrome插件来更改背景图片

皮卡皮卡~，小白也能用AI开发Chrome插件来更改背景图片喽~

🎉 你是否想过自己写一个 Chrome 插件？ 不需要复杂的编程基础，今天我将手把手教你如何使用 AI 辅助工具快速创建一个 Chrome 扩展，只需点击一下按钮，就能把背景变成皮卡丘！ pikaqiuu~ ⚡⚡

🧠 为什么选择 AI 来辅助开发？

作为一名AI应用开发工程师，我们的目标是不局限于传统程序员的角色，而是以智能生产力为核心。借助强大的语言模型（LLM），如OpenAI、Claude sonnet和DeepSeek等，我们可以大幅提高效率。这些工具特别适合代码生成，并且能够融入我们的开发流程中。

Prompt Engineering(编程)

Prompt Engineering的核心在于给AI一个身份，让它像人一样思考，并为它提供具体的任务。例如，在Chrome插件开发中，我们可以告诉AI：“你是Hulk插件的开发者，你的任务是帮助用户一键改变网页背景。”这样的细化流程让指令更加清晰准确，同时明确了遵守的原则和限制条件。

下面，我们将一起打造一个名为 “Hulk” 的 Chrome 插件

🛠️ 一、准备项目结构

我们的扩展项目应该包含以下几个文件和文件夹：

屏幕截图 2025-05-11 210341.png

✅ icons 文件夹：存放不同尺寸的插件图标
✅ images 文件夹：存放你要替换的背景图 pikaqiu.png
✅ popup.html：用户点击插件时显示的界面
✅ popup.js：处理点击事件并注入脚本到当前网页
✅ manifest.json：扩展的核心配置文件

🔧二、对Trae进行AI输入

通过Trae这样的AI协作工具，我们可以通过自然语言描述需求， Trae便会帮助我们生成大部分的代码框架。

但是！！！重点来了，我们应该如何描述需求呢？

其实并不难，只需记住以下几步：

给它一个身份：
- “你是一个经验丰富的chrome扩展开发者。”
输入任务：
- “我想开发一个名为Hulk的Chrome插件，它可以一键改变网页背景为皮卡丘图像。”
细化流程：
- “Step1: 点击程序图标，打开弹出窗口，在窗口中显示默认提示：‘改变背景图片’、‘点击下方按钮将当前页面的背景图片改为皮卡丘’和一个按钮：‘改变背景图片’按钮。 Step2: 点击按钮，网页背景图片改变为图片：pikaqiu.png”。
标明注意事项：
- “注意以下两点：请使用icons文件夹的图标作为应用程序的图标；图片背景改为pikaqiu.png之后，其他显示的内容框稍微修改一下透明度。”

只要记住以上四步，相信你也能从小白秒变“大佬”，接下来，让我们看看生成的结果：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Hulk</title>
  <!-- 省略样式和脚本 -->
</head>
<body>
  <h3>改变背景图片</h3>
  <p>点击下方按钮将当前页面的背景图片改为皮卡丘</p>
  <button id="changeColor">改变背景图片</button>
  <script src="popup.js"></script>
</body>
</html>

// 当点击扩展程序中的按钮时触发事件
document.getElementById('changeColor').addEventListener('click', async () => {
  // 获取当前活动标签页并执行脚本
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      // 修改背景逻辑...
    }
  });
});

{
    "manifest_version": 3,
    "name": "Hulk",
    "version": "1.0",
    "description": "点击按钮将网页背景改为皮卡丘图片",
    "icons": {
        "16": "icons/icon16.png",   
        "48": "icons/icon48.png",   
        "128": "icons/icon128.png"  
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",   
            "48": "icons/icon48.png",   
            "128": "icons/icon128.png"  
        }
    },
    "permissions": [
        "activeTab",
        "scripting"
    ],
    "web_accessible_resources": [{
        "resources": ["images/*"],
        "matches": ["<all_urls>"]
    }]
}

🧪 第三步：加载并测试插件

打开 Chrome 浏览器，访问：chrome://extensions/
启用右上角的 开发者模式
点击 “加载已解压的扩展程序”，选择你的项目文件夹
插件安装成功后，在浏览器工具栏中找到 Hulk 插件图标
点击图标 → 点击按钮 → 页面背景就变成皮卡丘了！

你可以看到，这是使用插件前的效果

屏幕截图 2025-05-11 205322.png

接下来，请...好好地看着我...

将将...大变耗子！

屏幕截图 2025-05-11 205004.png

🎁 总结

恭喜我们完成了第一个 Chrome 插件！🎉

虽然这个“大变耗子”插件的功能很简单，但它是我们成为AI应用开发工程师的第一步。

我们学会了如何开发一个简单的Chrome插件，无论是Prompt Engineering还是Trae AI编程协作，相信它都为我们提供了一种新的视角和技术手段。

📌 如果你喜欢这篇文章，欢迎点赞、收藏或分享给朋友～
💬 有任何问题欢迎在评论区留言，我会尽力解答！

皮卡皮卡~，小白也能用AI开发Chrome插件来更改背景图片