零基础用 Gemini 3.5 写出第一个 Chrome 浏览器插件：手把手保姆级实操

你是否也曾有过这样的想法：要是浏览器能有一个一键提取网页图片、或者自动翻译特定排版的插件就好了？以前，哪怕只是写一个最简单的 Chrome 插件，你也得去啃冗长的官方文档，搞懂 Manifest V3 的各种权限和背景页（Background Script）的生命周期，这让很多编程小白望而却步。最近，我在 AI 模型聚合平台工具整合站点库拉（官网：ssooai.cn）上调试了 Gemini 3.5，发现只要提示词给得对，这个强大的大模型能化身“保姆级”导师，带你仅用 10 分钟、零基础手写出一个完全属于你自己的 Chrome 浏览器插件。

为什么选择 Gemini 3.5 来写 Chrome 插件？

对于零基础玩家来说，写插件最大的痛点在于规则多、容错低。谷歌在几年前强制推行 Manifest V3 规范，安全限制极严，网上大量旧版的 V2 教程代码直接废掉。如果用普通 AI 模型，它们往往会“胡乱拼接”新旧规范，导致插件加载直接报错。

相比之下，Gemini 3.5 的优势在于它对最新技术文档的深度理解和极低的“幻觉率”。它不仅能严格遵循 Manifest V3 的规范，还会主动帮你把 HTML、CSS 和 JavaScript 文件梳理得井井有条，甚至贴心地附带如何安装、如何调试的傻瓜式步骤。

第一步：明确需求，生成配置文件

我们要做的插件功能很简单：点击浏览器右上角的插件图标，就能一键统计当前网页的字数，并估算出阅读完需要多少分钟。这不仅实用，而且涵盖了插件的核心要素：UI 交互与网页数据抓取。

首先，我向 Gemini 3.5 投喂了如下需求：

“我是一个完全不懂编程的小白。我想用 Manifest V3 规范写一个 Chrome 插件，功能是：点击插件图标后，弹出一个小窗口，显示当前网页的总字数和预计阅读时间（按每分钟 400 字计算）。请帮我规划项目目录，并提供 manifest.json 的代码。”

Gemini 3.5 迅速给出了清晰的目录结构：

manifest.json (配置文件)

popup.html (弹窗界面)

popup.js (业务逻辑)

其中，它生成的 manifest.json 符合最新的 V3 标准，声明了 activeTab 和 scripting 权限，极其干净，没有任何冗余。

第二步：生成交互界面与核心逻辑

接下来是写界面和提取网页内容。我继续引导 Gemini 3.5：

“请帮我写出 popup.html 和 popup.js 的代码。要求：界面要现代化，使用简洁的卡片式设计；JS 代码要能获取当前活跃标签页的 DOM，提取所有文本，过滤掉 HTML 标签，并计算出准确字数。”

Gemini 3.5 给出的 HTML 自带了一段轻量且精美的 CSS 样式，渐变色背景和圆角卡片，极具现代感。

而在 popup.js 中，它展示了极高的代码鲁棒性。它没有直接用容易导致跨域报错的复杂注入，而是使用了 chrome.scripting.executeScript，通过一行极简的匿名函数在页面上下文中提取 document.body.innerText，并进行正则过滤。整段代码没有任何生涩的第三方库，全原生实现，极易阅读。

第三步：1 分钟本地加载跑通

代码生成后，Gemini 3.5 还给出了小白极其友好的安装指南：

在电脑上新建一个文件夹，把上面三个文件分别保存进去。

打开 Chrome 浏览器，访问 chrome://extensions/。

开启右上角的“开发者模式”。

点击左上角的“加载已解压的扩展程序”，选中刚刚新建的文件夹。

搞定！随便打开一篇文章，点击浏览器右上角的插件图标，当前网页的字数和阅读时间瞬间呈现在精美的卡片上。一次跑通，没有任何报错！

行业趋势：人人都是“定制化工具”的造物主

从行业的角度看，AI 正在彻底重塑“开发者”的定义。以前，编程是专业人士的专利；而现在，大模型将底层技术细节（如复杂的 API、烦琐的编译配置）全部封装隔离。

未来的极客和玩家们，不需要去硬背语法，只需要具备敏锐的“问题定义能力”。只要你有痛点、有创意，配合像 Gemini 3.5 这样高精度的 AI 助手，就能像搭乐高一样，随时为自己量身定制各种轻量级工具。这种“个人软件定制化”的时代，已经悄然来临。