0基础，纯靠AI，我写出了自己的第一个Chrome插件

不会写代码不要紧，2026年了，会说话就行。

先说结论：我，一个写了20年文档但没写过一行代码的人，用AI写了一个Chrome浏览器插件。

不是什么牛逼的功能，就是一个能在B站后台听音频的小工具。但对我来说，这事的意义不在于插件本身——而是我发现，2026年了，不会写代码这件事，终于不再是死穴了。

✦ ✦

为什么要做这个插件？

起因很简单：我经常在B站听一些长音频内容——ASMR、有声书、播客、讲座。但B站网页版有个问题：它是个视频网站，你必须开着那个页面。

有时候我只想听声音，不想看画面，但浏览器标签页不能关，关了声音就停了。更烦的是，有些内容明明是音频向的，比如"ASMR专注力测试"、"睡前故事合集"，但B站非得以视频形式呈现，白白浪费流量和内存。

"能不能有个东西，让我只看音频列表，后台播放，不占资源？"

搜了一圈，现有的插件要么功能太重，要么界面丑到无法直视。得，那就自己做一个吧。

可是……我不会写代码啊。

先交代一下我的"编程基础"：

不知道HTML、CSS、JavaScript的区别

没装过任何IDE，不知道什么叫"开发环境"

分不清浏览器插件和手机App的差异

唯一的"编程经验"是大学时交过一份抄来的C语言作业

就这水平。搁在两年前，我连"写个插件"这四个字都不敢说。

✦ ✦ ✦

我的四步搞定法

整个流程其实很简单，总结下来就四步：选IDE、选模型、写提示词、慢慢调试。

第一步：选一个趁手的IDE

搞AI编程，第一步不是学代码，是选工具。

市面上有不少选择——VS Code、Codex、Trae，还有各种大模型自带的CLI工具，都能用。但我最终选的是Qoder。

为什么选Qoder？

开箱即用，不用折腾配置

内置大模型，不用到处找API Key

代码编辑和AI对话在同一界面，切换方便

对新手友好，很多操作有引导

当然，工具这东西因人而异。你用VS Code配Copilot，用Trae，甚至直接在大模型的CLI里写，都完全可以。关键是找到你用着顺手的那个。我选Qoder，纯粹是因为上手最快，不用研究半天配置。

第二步：选一个合适的大模型

IDE选好了，接下来是大模型。这是真正帮你写代码的"大脑"。

我用的模型是Qoder自带的 Qwen3.7-plus。选它的原因也很简单：

Qoder + Qwen3.7-plus 的优势

集成在IDE里，不用额外注册和配置

有一定的免费额度，够我前期折腾

对中文理解好，提示词不用抠字眼

代码生成质量够用，Chrome插件这种需求完全hold住

当然，免费额度用完就得充钱。好在我之前买过百元的 DeepSeek 额度，Qwen用完了就切过去用。反正现在国产大模型选择多，哪家便宜用哪家，效果都差不多。

选模型不用太纠结。写Chrome插件这种需求，Qwen、DeepSeek、Claude都能搞定。关键是模型得能理解你的中文描述，生成靠谱的前端代码。国产模型在这块已经做得很好了。

第三步：把功能说清楚

工具和大模型都准备好了，接下来就是最关键的一步——写提示词。

说白了就是：你想让AI帮你做什么，你得说清楚。

我的第一段prompt大概是这样的：

我要做一个Chrome浏览器插件（Manifest V3）。功能是：读取B站用户的动态、收藏、关注列表，提取其中的视频，以音频形式后台播放。界面要求深色主题，三个Tab分别对应动态、收藏、关注。每个视频条目显示封面、标题、UP主名称和时长。顶部显示当前播放信息和进度条，支持播放/暂停。失效视频要有标识。

就这一段话，AI直接给了我完整的项目结构和所有文件代码。

manifest.json ← 插件配置文件（Manifest V3）

popup.html ← 弹窗界面

popup.css ← 样式

popup.js ← 弹窗逻辑

service-worker.js ← 后台服务

content.js ← 页面注入脚本

我当时看着这堆文件，一脸懵。但AI说："你不用懂，我一个个给你生成，你直接加载到Chrome就行。"

写提示词的关键：把功能拆清楚，不要笼统地说"我要一个B站工具"。而是明确告诉它：要什么页面、什么Tab、什么字段、什么交互。你说得越具体，AI生成的代码就越接近你要的样子。

第四步：慢慢调试，别怕出错

代码生成之后，剩下的就是调试了。

Chrome插件的加载很简单：打开 chrome://extensions，开启「开发者模式」，点「加载已解压的扩展程序」，选你的代码文件夹，搞定。

然后就是：加载 → 看效果 → 发现问题 → 告诉AI → 改 → 再加载 → 再看……

这个过程说白了就是"反复尝试"。

"颜色不对，我要的是深灰色背景，不是纯黑。" → AI改CSS

"点击收藏Tab没反应，控制台报错了。" → AI查了JS，说是事件绑定问题，改

"播放按钮点了没声音。" → AI说B站音频地址需要特殊处理，重写了一段抓取逻辑

"Service Worker过一会儿就停了，音频播放中断了。" → AI说Manifest V3的SW会休眠，用chrome.offscreen API保活

调试的时候有个技巧：怕出问题的部分，直接告诉AI你担心什么。比如：

"我担心Chrome后台会杀掉我的Service Worker，导致音频播放中断，你帮我考虑一下这个情况。"

AI听到这种话，会主动给你加容错逻辑，比你等出问题了再修要高效得多。

调试心得

按F12打开开发者工具，看Console里的报错信息，直接复制给AI

不要怕报错，报错是正常的，AI最喜欢帮你修bug

一次改一个问题，别一次扔十个bug过去，AI会晕

改完就刷新测试，确认没问题再继续

来回折腾了大概3天，每天下班后搞2小时。就这么一点一点，一个能用的插件就出来了。

界面就是开头那张截图的样子——深色背景、蓝色高亮、进度条清晰，三个Tab切换流畅。说实话，最后出来的效果，我自己都惊了：这玩意儿居然是我"写"出来的？

✦ ✦ ✦

踩过的坑

开发过程中遇到了不少坑，但好消息是：这些坑AI基本都提前提醒过我了。只是我当时没当回事，等真遇到了才想起来"哦，它之前说过"。

插件改完代码要回到 chrome://extensions 点「刷新」才生效，我一度以为代码没保存

Manifest V3 的 Service Worker 空闲会休眠，需要用 chrome.offscreen API 保活音频

B站的API有反爬机制，直接请求会被拒绝，要配合用户自己的登录态

manifest.json 里权限写少了功能不工作，写多了审核不通过，得反复调平衡

Chrome Web Store 审核要1-3个工作日，提交前要准备隐私政策、截图、说明文档

B站视频地址有时效性，过期了要重新获取

遇到这些坑的时候，我就把报错信息直接扔给AI，它基本都能秒定位问题。这才是AI编程最爽的地方——你不用理解代码，你只需要把现象描述清楚。

✦ ✦ ✦

体验总结

🌿 几个真实感受

1. 门槛真的低了。

2026年了，AI编程已经不是程序员的专利。

你只要能把需求说清楚，它就能帮你把代码写出来。

HTML、CSS、JavaScript这些术语，

你完全可以不懂，但插件一样能跑起来。

2. 提示词就是生产力。

与其花时间学语法，不如花时间学"怎么提需求"。

你描述得越具体，AI给你的东西就越接近预期。

这其实也是一种能力——产品思维。

3. 调试比写代码更重要。

AI生成的代码不一定一次就对，

但它帮你改bug的能力是真的强。

关键是你得学会"看报错→描述问题→让AI改"这个循环。

4. 国产工具已经很好用了。

Qoder + Qwen3.7-plus 的组合，

配合备用的 DeepSeek，

全程中文交互，没有语言障碍，

对国内开发者来说体验很顺滑。

这个插件功能不复杂，代码也不优雅，甚至可能有不少bug。但对我来说，这件事的意义在于——我证明了"不会写代码"不再是做产品的障碍。你只需要清楚自己要什么，然后跟AI沟通。剩下的，它都能帮你搞定。