大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



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

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

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

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

我们的目标：

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

准备好了吗？开始。

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

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

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

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

好，跟着做。

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

dark-mode-extension/

就这名字，随便你改。

然后回去问 AI：

第一步做什么？

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

],"action":{"default_title":"点击切换深色模式"},"permissions":["activeTab"]}

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

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

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

回去问 AI：

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

AI 会给你：

// 创建或切换深色模式let darkMode = false;// 添加切换函数functiontoggleDarkMode()       a { color: #4da6ff !important; }    `;document.head.appendChild(style);  } else }// 执行一次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 会给你新的代码。

加上 action 配置：

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

AI 会给你：

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

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

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

让脚本监听消息：

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

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

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

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

它改了，就好了。

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

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

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

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

加了就好了。

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

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

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

基础版搞定后，你可以继续问 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. 等待审核

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

我的经验：

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

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

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

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

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

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

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

全程不需要：

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

你需要做的是：

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

就这么简单。

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

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

每个都不难，问 AI 就行。

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

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