如何用 AI 制作一个谷歌插件:零基础教程

这篇文章，我带你用 AI 从零做一个 Chrome 插件。

全程不查文档，代码全靠 AI 生成。

做完你会得到一个能用的插件：自动把网页背景变成深色模式。

听起来简单？对，就是要简单。

我们的目标：

• 1 小时内完成
• 代码不超过 50 行
• 全靠 AI 辅助

准备好了吗？开始。

第一步：告诉 AI 你要做什么

打开你常用的 AI（ChatGPT/Claude/通义千问都行），说：

我想做个 Chrome 插件，功能是让网页变成深色模式。我是零基础，请一步步教我，每次只告诉我下一步做什么。

AI 会给你一个大致的计划：

好的，我们分 5 步：1. 创建插件文件夹2. 写 manifest.json（配置文件）3. 写 content.js（注入页面的脚本）4. 准备图标5. 加载测试

好，跟着做。

第二步：创建文件夹

在你的电脑上找个地方，新建一个文件夹：

dark-mode-extension/

就这名字，随便你改。

然后回去问 AI：

第一步做什么？

第三步：写 manifest.json

AI 会给你类似这样的代码：

{"manifest_version":3,"name":"深色模式","version":"1.0.0","description":"一键让网页变成深色模式","content_scripts":[{"matches":["<all_urls>"],"js":["content.js"],"run_at":"document_idle"}],"action":{"default_title":"点击切换深色模式"},"permissions":["activeTab"]}

直接复制，保存为 manifest.json，放在刚才的文件夹里。

解释几个关键配置（问 AI 它也会告诉你）：

• manifest_version: 3 - 用最新版
• matches: <all_urls> - 对所有网页生效
• run_at: document_idle - 等页面加载完再执行

第四步：写 content.js

回去问 AI：

第二步，content.js 怎么写？要让网页背景变黑，文字变白

AI 会给你：

// 创建或切换深色模式let darkMode = false;// 添加切换函数functiontoggleDarkMode() {  darkMode = !darkMode;if (darkMode) {// 添加深色样式const style = document.createElement('style');    style.id = 'dark-mode-style';    style.textContent = `      body {        background-color: #1a1a1a !important;        color: #ffffff !important;      }      a { color: #4da6ff !important; }    `;document.head.appendChild(style);  } else {// 移除深色样式const style = document.getElementById('dark-mode-style');if (style) style.remove();  }}// 执行一次toggleDarkMode();console.log('✅ 深色模式已启用');

复制，保存为 content.js，放在同一个文件夹。

就这么简单。

第五步：准备图标（可选）

没有图标的话，插件会显示个灰色拼图，丑。

问 AI：

Chrome 插件图标需要什么尺寸？哪里可以免费获取？

AI 会告诉你：

• 准备 16×16、48×48、128×128 三个尺寸
• 可以去 iconfont.cn 或 flaticon.com 找免费图标

找个喜欢的月亮或太阳图标，下载后重命名：

• icon16.png
• icon48.png
• icon128.png

然后在 manifest.json 里加上：

"icons":{"16":"icon16.png","48":"icon48.png","128":"icon128.png"}

第六步：加载测试

现在你文件夹里应该有：

dark-mode-extension/├── manifest.json├── content.js├── icon16.png├── icon48.png└── icon128.png

问 AI：

怎么测试我的插件？

AI 会给你步骤：

1. 打开 Chrome，访问 chrome://extensions/
2. 打开右上角”开发者模式”
3. 点击”加载已解压的扩展程序”
4. 选择你的 dark-mode-extension 文件夹

然后随便打开一个网页，看看背景是不是变黑了。

如果没效果，把问题贴给 AI，让它帮你改。

第七步：加个开关按钮

现在插件一加载就自动变深色，但我们想要个开关。

问 AI：

我想加个按钮，点击才切换深色模式，怎么改？

AI 会给你新的代码。

修改 manifest.json

加上 action 配置：

"action":{"default_icon":{"16":"icon16.png","48":"icon48.png","128":"icon128.png"}},"permissions":["activeTab","scripting"]

新建 background.js

AI 会给你：

// 监听点击事件chrome.action.onClicked.addListener(async (tab) => {// 向页面发送消息  chrome.tabs.sendMessage(tab.id, { action: "toggle" });});

保存为 background.js，然后在 manifest.json 里加上：

"background":{"service_worker":"background.js"}

修改 content.js

让脚本监听消息：

// 监听来自 background 的消息chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.action === "toggle") {toggleDarkMode();  }});// 移除自动执行// toggleDarkMode(); // 注释掉这行

现在刷新插件，点击图标才会切换深色模式。

我踩的坑

坑 1：manifest_version 写错了

一开始 AI 给我的是 version 2 的写法，加载时报错。

我又问：”用 manifest_version 3 的写法重新给我”

它改了，就好了。

记住：AI 可能给旧版本的代码，要确认是 v3。

坑 2：权限没加

第一次写的时候，background.js 没法发送消息。

报错：Error: Cannot access contents of the page.

问 AI，它说要在 manifest.json 里加 scripting 权限。

加了就好了。

坑 3：图标路径不对

我图标放在 icons/ 子文件夹，结果插件找不到。

AI 说：”图标要和 manifest.json 在同一级目录，或者路径写对”

我直接挪到根目录，省事。

进阶：让 AI 帮你加功能

基础版搞定后，你可以继续问 AI：

加个设置页面

我想加个设置页面，让用户能自定义深色模式的颜色，怎么做？

AI 会给你 popup.html 和 popup.js 的代码。

只针对特定网站

我只想让用户在特定网站启用深色模式，怎么改？

AI 会教你用 chrome.storage 保存用户偏好。

添加快捷键

怎么添加快捷键，比如 Ctrl+Shift+D 切换深色模式？

AI 会给你 chrome.commands 的配置。

发布到商店（可选）

如果你想让更多人用，问 AI：

Chrome 插件怎么发布到应用商店？

AI 会给你完整流程：

1. 打包成 ZIP
2. 注册开发者账号（5 美元）
3. 上传到 Chrome Web Store
4. 填写描述和截图
5. 等待审核

关键：怎么问 AI 效率最高

我做这个插件，大概问了 15 次问题。

我的经验：

1. 给上下文

❌ "怎么写 Chrome 插件？"✅ "我想做个 Chrome 插件，功能是 XXX，用 manifest_version 3"

2. 要完整代码

❌ "background.js 怎么写？"✅ "给我 background.js 的完整代码，能直接运行的"

3. 报错直接贴

❌ "我的插件不工作"✅ "我点击图标没反应，控制台报错：Uncaught TypeError: XXX"

4. 让 AI 解释

"这行代码什么意思？给我注释一下"

5. 追问细节

"为什么这里要用 async/await？""chrome.tabs.sendMessage 和 chrome.runtime.sendMessage 有什么区别？"

总结

用 AI 做 Chrome 插件，流程很简单：

告诉 AI 要什么 → 它给代码 → 复制粘贴 → 测试 → 报错就问 → 改好 → 完成

全程不需要：

• 查官方文档
• 背 API
• 理解复杂概念

你需要做的是：

• 提清楚需求
• 复制粘贴代码
• 测试验证
• 报错时准确描述问题

就这么简单。

下一步

做完这个深色模式插件，你可以试试：

1. 网页划词翻译 – 选中文字自动翻译
2. 广告拦截 – 屏蔽特定元素
3. 自动填充表单 – 记住你的常用信息

每个都不难，问 AI 就行。

记住：AI 是你的编程助手，不是替代品。

它写代码，你负责提需求和验证。