零基础小白利用Trae也能三下五除二把网页背景"绿"了？！😯本文是一个零基础小白利用集成AI的IDE进行一个简单的Ch

前言

（0基础小白的学习经验记录QwQ）

什么是Chrome插件及其在浏览器中的作用

Chrome插件是用于增强和扩展Google Chrome浏览器功能的小型软件，通过HTML、CSS和JavaScript开发，它可以增加新功能如广告拦截或密码管理，定制浏览体验，提高上网效率，增强安全性或整合不同服务，从而为用户提供更加个性化和高效的上网体验。

为什么选择开发这样一个简单功能的插件作为教程的例子

AIGC学习趋势：随着AI技术的蓬勃发展，最近在进行AIGC（人工智能生成内容）的学习成为一种趋势。
传统程序员转型：面对AI技术的进步，传统程序员需要将AI融入到开发流程中以保持竞争力，因为仅依赖传统编程技能可能逐渐面临被淘汰的风险。
Prompt AI范式：强调遵守Prompt AI范式，这是一种通过给AI提供具体的指令或提示来指导其生成内容的方法，可以帮助更高效地完成编程任务。
AI与开发结合：提倡将AI融入编程学习和工作中，让AIGC能够高效配合开发过程，提高工作效率和创新能力。
Chrome插件开发入门：鉴于Chrome插件开发具有易于理解、适合初学者等特性，推荐作为学习如何将AI集成到实际项目中的一个起点。

核心出装

字节最近推出的AI IDE - Trae

Chrome浏览器

开启green之路😯

步骤一：起点-创建个文件夹(命名随心😍)

AI的使用当然少不了调教♂，所以拥有详细的Prompt 提示词必不可少

项目文件夹中创建 instruction.txt 遵循 5W 原则

以下是可供参考的提示词：

你是一个经验丰富的chrome扩展开发者，请帮我开发一个名为Hulk的扩展应用。

ux设计图请参考ux.jpg。

具体交互步骤如下： Step 1：点击程序图打开弹出窗口，在窗口中显示默认提示: "改变背景颜色"、“点击下方按钮将当前页面背景色改变为绿色”和一个“改变背景颜色”按钮

Step 2：点击按钮，网页背景改变为绿色

注意以下两点：请使用icons文件夹的图标作为应用程序的图标

提示词里具有icons文件夹，那aigc下自然就要具有icons文件夹并存放相应的图标啦，同时aigc下也要具有ux设计图

如下:

完成后就是这个样子

步骤二：妈咪妈咪哄，发挥AI神力！！！🤩🤩🤩

运用Trae的侧边栏，输入相应内容让AI发挥力量！

AI具有上下文功能，此时选择 #File 中的 instruction.txt 即可

艾玛铁汁，确实给力熬

此时就会生成出对应的所需的代码

甚至具有教你如何在浏览器中加载的步骤，AI还是太全面了

步骤三：这个这个还有这个全部采纳！✔️✔️✔️

紧接着我们只要点击右边的应用并点击采纳，就可以接受AI的神力啦！每一段代码都要采纳哦🫡🫡🫡

以下代码仅供参考：

manifest.json:

{
  "manifest_version": 3,
  "name": "Hulk",
  "version": "1.0",
  "description": "改变网页背景颜色为绿色",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

popup.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hulk</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>改变背景颜色</p>
  <p>点击下方按钮将当前页面背景色改变为绿色</p>
  <button id="changeColor">改变背景颜色</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js:

document.getElementById('changeColor').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      files: ['content.js']
    });
  });
});

content.js:

document.body.style.backgroundColor = 'green';

依次采纳完后层级目录就会呈现这么个状态

步骤四：哇咔咔！让我们看看是否奏效😏😏😏

打开Chrome浏览器，并在浏览器中输入以下内容打开扩展程序页面

加载已解压的扩展程序，要来辽！要来辽！🤤🤤🤤

步骤五：打开一个页面！！Start！！！

打开！！！😋😋😋

点击！！！😋😋😋

绿了绿了😁😁😁😭😭😭

感受AI神力的同时学习

艾玛，这些个拼音我都认识，咋看不懂捏？！😭😭😭

没事的没事的哥们，你有AI！！！😎😎😎

将其添加到对话，并利用AI对这段代码进行解释，这样就能做到对代码进行进一步的理解，同时在使用AI生成的时候进行学习

jiangjiang~

结语（感谢各位！）

在AI技术迅猛发展的今天，零基础的小白也能通过智能生产力工具轻松踏入开发的世界。不再受限于传统的编程学习路径，您可以通过以大型语言模型（LLM）为核心的智能工具，如OpenAI、Claude Sonnet和DeepSeek等，快速实现从概念到产品的转变。这些强大的AI工具不仅能够帮助我们简化代码生成过程，更能通过Prompt Engineering让大模型像人类一样思考并执行具体任务。

以Chrome插件开发为例，这是一条适合初学者的入门之路。传统上，学习一门新技术可能需要经历学习理论、制作demo、寻找实习或工作的漫长过程。而现在，借助AI的力量，这一切变得简单快捷。只需要基本了解Prompt的概念，就能利用自然语义编程来指导AI完成大部分工作。例如，想要开发一个简单的功能——改变网页背景颜色为绿色，您只需明确地给出指令，细化流程，并赋予AI一个“身份”，它便能高效准确地完成任务。

更重要的是，随着对Prompt AI范式的深入理解和应用，您不仅能快速上手Chrome插件开发，还能逐步掌握如何将AI融入日常开发流程中，打造更智能、更自动化的应用。无论是远程协作还是自动化测试，AI都能成为您的得力助手。拥抱AI，不仅是顺应时代潮流的选择，更是开启无限可能的关键一步。让我们一起迈向这个充满机遇的新时代，用智能生产力重新定义我们的工作方式！

零基础小白利用Trae也能三下五除二把网页背景"绿"了？！😯

前言