从Prompt到落地：小白如何用自然语义编程开发一个简单Chrome插件？

3Katrina
960 阅读11分钟

前言

在AI重塑编程方式的今天，用自然语言开发工具已不再是未来幻想。但对于零基础开发者来说，如何跨越从"想法"到"落地"的鸿沟？

本文将以一个真实案例，带你体验如何仅凭自然语言指令，从零开发一个功能完整的Chrome插件。你将看到：

  1. Prompt工程的核心技巧 - 如何与AI高效对话
  2. AI编程的落地路径 - 从需求分析到代码调试的全流程
  3. 小白友好实践 - 无需编程基础，借助AI完成注释与优化

通过这篇指南，你将掌握用自然语言驱动开发的完整方法论。现在，让我们开始这场"说话就能编程"的奇妙之旅。

背景

某天深夜，某大学男生宿舍传来一声哀嚎😱——计算机系的小王，收到了老师布置的「奇怪」作业： 开发一个让浏览器变绿的Chrome插件！

但是小王在学前端的时候在跟舍友开黑，这作业根本不会做呀！这咋办嘞？于是小王准备请教学长，学长身经百战，于是就给小王推荐了一个好用的工具：Trae，并且在小王面前仅用了三分钟就给他完成了这个效果（见图1.1，图1.2）。初出茅庐的小王惊呆了！这玩意还能这么整！学长快教教我！学长骄傲的说：简简单单！接下来我就开始教你。听好了！

image.png

图1.1 网页正常页面

image.png

图1.2 点击插件后页面

 

一、初识Trae

首先，学长新建了一个文件夹lesson_si，用来存放小王的作业提交，接着并且给小王下载并安装了Trae。

小王：🤔学长学长，Trae是什么呀？

学长：🤓Trae是一个编辑器，我们可以利用Trae帮我们写代码，帮助我们提供思路并且完成我们想要布置的任务，当然了，也可以完成你的作业呀！

小王：🤔学长学长，像这样的编辑器还有别的可以推荐一下吗？

学长：🤓有的兄弟有的，像这样的代码编辑器还有很多个，现在市面上这种AI驱动的代码审查与协作平台有Trae、Cursor、GitHub Copilot、Codeium等等，比较常用的有Cursor、Trae，Cursor相对于Trae它的LLM性能会更强，但是Cursor人家要收费啊，而Trae是咱国内字节开发的，所以，对于你这种新手来说，用Trae就够啦！

小王：🤔学长你刚刚说到LLM？这个概念我好像不太了解，能给我讲讲吗？

学长：🤓没问题，LLM（Large Language Model），也叫大语言模型，是一种基于深度学习的自然语言处理模型，能够理解、生成和推理人类语言。你平常会用deepseek和chatgpt吧，他们就有各自的大语言模型，也就是LLM呀。

 

二、Prompt的书写规范

回答完小王的问题之后，学长接着进行了下一步操作的演示：在导入老师提供的图片材料icons以及ux.jpg时，在里的文件夹中，还创建了一个instruction.txt文件。（见图2.1）

image.png

图2.1 文件目录

小王：🤔学长学长，导入图片材料我能理解，但是创建这个instruction.txt文件有什么作用呀？

学长：🤓这个文件是用来写我们的Prompt的，将来等你用ai编程时会经常创建的哟。

小王：😵学长，我好晕，我怎么没听过Prompt是啥呀。

学长：🤓你还记得你平常向DeepSeeek和ChatGpt提问：”请帮我完成一篇软件工程导论的论文，要求5000字“吗？其实呀，你提问的这一句话就是属于Prompt。
其实Prompt（提示词） 的概念就是用户输入给 AI 模型（如 ChatGPT、Claude、MidJourney） 的指令或问题，用于引导 AI 生成符合预期的回答、代码、图片等内容

小王：😮搜嘎寺内！原来我之前叫Gpt帮我写论文，就是我在输入Prompt呀！

学长：🤓没错的，但你之前写的Prompt过于简单了哦，在实际开发时，写好Prompt可是一门学问呢！我们在写Prompt时，需要遵循以下几个步骤：

  1. 给AI一个具体的身份，比如你在完成作业时，对AI讲，你是一个经验丰富的前端开发工程师。
  2. 输入具体的任务,你可以写，帮我完成一个名为Hulk的扩展应用，我想要把浏览器变绿。
  3. 细化流程，清晰准确，比如，Step 1： 点击程序图标打开弹出窗口，在窗口中显示默认提示： “改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” 和一个 “改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” Step 2：点击按钮、网页背景改变为绿色。
  4. 写清楚注意事项，比如，注意以下： 请使用icons文件夹的图标作为应用程序的图标

在这样的步骤下，通常一份简单高质量的Prompt就写好了。同时写的时候要注意清晰具体，避免歧义等问题，不用担心，这些步骤和事项随着你学习AI时写多了，自然就能注意到。

小王：🤩原来如此，我已经迫不及待地想来试试了！我的作业是开发一个能使浏览器背景颜色变绿的chrome插件，那我接下来就按照你说的，来完成针对这次作业的Prompt了

接着，小王在学长的指导下完成了这个Prompt：

你是一个经验丰富的chrome扩展开发者。请帮我开发一个名为Hulk的扩展应用。 ux设计图请参考ux.png。 具体交互步骤如下： Step 1： 点击程序图标打开弹出窗口，在窗口中显示默认提示： “改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” 和一个 “改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” Step 2：点击按钮、网页背景改变为绿色 注意以下两点： 请使用icons文件夹的图标作为应用程序的图标   

学长：😮写的不错呀。接下来就让我们在chat中输入”请根据 instruction.txt 当中的需求，帮我开发对应的chrome扩展程序。“就可以了。

小王：🤔这里的chat是什么呀

学长：🤓在Trae中有Chat模式和Builder模式，我们可以在登录 Trae AI 后，在主界面左侧或顶部导航栏找到模式切换按钮进行两种模式的切换呀，这两个模型中， chat模式的核心用途是自然语言对话、代码问答。Builder的核心用途是可视化组装AI工作流。对于小白来说chat模式的使用会多一点，你看，它更像咱们平时用的AI问答形式，（见图2.2）把问题放在聊天框中输入就可以了。而Builder涉及到工作流，对于小白来说，咱就先不用了解那么多啦。

image.png

图2.2 Trae的Chat聊天框

 

三、AI生成代码并自动执行

小王：🤔我明白啦，那咱们现在就提交吧

学长：😎嘿嘿，我现在提交咯，接下来看好了，你可别眨眼哦。

顷刻间，Trae的chat给出了以下内容：

全文内容详见：

一、核心配置文件 manifest.json
定义扩展基本信息、图标和权限（需放在 c:/Users/17378/Desktop/lesson_si/aigc/hulk 目录下）：

{
    "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"]
        }
    ]
}
  • manifest_version: 3 ：使用Chrome扩展最新规范
  • default_icon ：引用 icons 文件夹中的图标（需确保该文件夹包含16x16、48x48、128x128三种尺寸的图标文件）
  • content_scripts ：声明内容脚本 content.js ，用于监听并执行背景色修改操作

二、弹出窗口界面 popup.html
定义点击扩展图标后弹出的窗口内容（需放在 c:/Users/17378/Desktop/lesson_si/aigc/hulk 目录下）：

<!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>
    <style>
        body { min-width: 200px; padding: 10px; }
        p { margin: 5px 0; }
        button { margin-top: 10px; padding: 5px 10px; }
    </style>
</head>
<body>
    <!-- 需求中重复的提示文本 -->
    <p>改变背景颜色</p>
    <p>点击下方按钮将当前页面背景色为绿色</p>
    <p>改变背景颜色</p>
    <p>点击下方按钮将当前页面背景色为绿色</p>
    <button id="changeColorBtn">立即改变背景色</button>
    <script src="popup.js"></script>
</body>
</html>

三、弹出窗口逻辑 popup.js
处理按钮点击事件并向当前页面发送指令（需放在 c:/Users/17378/Desktop/lesson_si/aigc/hulk 目录下）：

document.addEventListener('DOMContentLoaded', () => {
    const changeColorBtn = document.getElementById('changeColorBtn');
    changeColorBtn.addEventListener('click', () => {
        // 获取当前活动标签页
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
            // 向标签页发送消息，要求修改背景色为绿色
            chrome.tabs.sendMessage(tabs[0].id, { 
                action: 'change_bg_color', 
                color: 'green' 
            });
        });
    });
});

四、页面内容脚本 content.js
接收扩展指令并修改网页背景色（需放在 c:/Users/17378/Desktop/lesson_si/aigc/hulk 目录下）：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'change_bg_color') {
        document.body.style.backgroundColor = request.color;
    }
});

五、图标准备 请确保 c:/Users/17378/Desktop/lesson_si/aigc/hulk/icons 文件夹中包含以下图标文件（尺寸需严格匹配）：

  • icon16.png （16x16像素）：扩展在地址栏的小图标
  • icon48.png （48x48像素）：扩展管理页面的图标
  • icon128.png （128x128像素）：安装时的图标

六、加载扩展测试

  1. 打开Chrome浏览器，访问 chrome://extensions/
  2. 开启右上角的「开发者模式」
  3. 点击「加载已解压的扩展程序」，选择 c:/Users/17378/Desktop/lesson_si/aigc/hulk 文件夹
  4. 点击浏览器地址栏右侧的扩展图标，弹出窗口后点击按钮，当前网页背景会变为绿色 注：若 ux.jpg 设计图有额外样式要求（如字体、按钮颜色等），可在 popup.html 的 标签中调整CSS。

小王：🤩沃趣！它好像把所有的代码都生成出来了欸，好神奇

学长：😎那当然，接下来就简单啦，咱们只需要挨个对其生成的代码点击应用（见图2.3），并且接受（见图2.4），连复制粘贴都不用我们自己操作，然后咱们阅读ai给出的部署操作，去实现。你会发现，一个符合我们要求的，能够将页面变绿的chrome插件就做好啦，从头到尾，ai帮我们写，并且教我们每一步的思路，甚至最后的部署都能给我们搞定，简直是保姆式操作好不好！

image.png

图2.3 代码应用

image.png

图2.4 接受代码

image.png

图2.5 全部接受后的代码结构

 

四、AI自动解释和生成注释

小王：😮哇，学长，我试了下，能成功有效果诶，好像ai写的这个插件真的能把浏览器变绿喔，但是，我们老师要求作业的代码一定要加上注释，但是我好像都不知道这些代码的意思，我该怎么办呀。

学长：😎这个也so easy，你可以把需要加注释的代码选中，然后选择添加到对话（见图4.1），接着在聊天框中对AI讲，“请你帮我把这段代码加上注释”（见图4.2），然后AI就会将你的代码加上注释并且你仍旧可以跟上面一样，点击应用并接受就可以啦！

image.png

图4.1 选中代码 添加到对话

image.png

图4.2 聊天框输入 加上注释

image.png
image.png

图4.3 应用并接受注释

小王：🤩我的天呐，太厉害了！这下我的作业终于能够完成啦，我也要好好学ai！待我学熟练之后，以后的作业也能轻轻松松应对了！

学长：😎哈哈，那是必须的，现在是属于AI的时代，我们也应该顺应时代，拥抱ai，顺便跟你讲哦，听说现在很多大厂50%以上的工作量都是用AI完成的！传统程序员说不定都要被淘汰了呢，所以，你现在也可以开始好好学AI啦，等你好好学成之后，说不定能做个AI应用开发工程师呢！

 

总结

近年来，AI技术的突飞猛进让编程效率实现了质的飞跃，今年2025被认为是AI的元年，正在见证软件开发领域的深刻变革。在这个关键转折点，我们必须积极拥抱变化，我认为我们应该转变思维，从传统编程转变到AI辅助编程，这场变革不仅仅是工具的更迭，更是开发理念的全面升级，从"写代码"到"设计需求"：开发者将更多精力放在需求分析和架构设计上； 从"记忆语法"到"优化Prompt" ：编程能力体现在与AI的高效对话能力；从"单打独斗"到"人机协作" ：形成开发者与AI的良性互动循环。展望未来，AI辅助编程将带来无限可能！让我们以开放的心态拥抱变革，用AI扩展编程的边界，共同开创软件开发的新纪元！记住，在这个AI赋能的时代，唯一限制我们的，就是我们的想象力。

 

若本文对你有帮助 点个赞 点个关注

image.png

avatar
文章
阅读
粉丝