零基礎(chǔ)用 Gemini 3.5 寫出第一個(gè) Chrome 瀏覽器插件：手把手保姆級(jí)實(shí)操

你是否也曾有過這樣的想法：要是瀏覽器能有一個(gè)一鍵提取網(wǎng)頁(yè)圖片、或者自動(dòng)翻譯特定排版的插件就好了？以前，哪怕只是寫一個(gè)最簡(jiǎn)單的 Chrome 插件，你也得去啃冗長(zhǎng)的官方文檔，搞懂 Manifest V3 的各種權(quán)限和背景頁(yè)（Background Script）的生命周期，這讓很多編程小白望而卻步。最近，我在 AI 模型聚合平臺(tái)工具整合站點(diǎn)庫(kù)拉（官網(wǎng)：ssooai.cn）上調(diào)試了 Gemini 3.5，發(fā)現(xiàn)只要提示詞給得對(duì)，這個(gè)強(qiáng)大的大模型能化身“保姆級(jí)”導(dǎo)師，帶你僅用 10 分鐘、零基礎(chǔ)手寫出一個(gè)完全屬于你自己的 Chrome 瀏覽器插件。

為什么選擇 Gemini 3.5 來寫 Chrome 插件？

對(duì)于零基礎(chǔ)玩家來說，寫插件最大的痛點(diǎn)在于規(guī)則多、容錯(cuò)低。谷歌在幾年前強(qiáng)制推行 Manifest V3 規(guī)范，安全限制極嚴(yán)，網(wǎng)上大量舊版的 V2 教程代碼直接廢掉。如果用普通 AI 模型，它們往往會(huì)“胡亂拼接”新舊規(guī)范，導(dǎo)致插件加載直接報(bào)錯(cuò)。

相比之下，Gemini 3.5 的優(yōu)勢(shì)在于它對(duì)最新技術(shù)文檔的深度理解和極低的“幻覺率”。它不僅能嚴(yán)格遵循 Manifest V3 的規(guī)范，還會(huì)主動(dòng)幫你把 HTML、CSS 和 JavaScript 文件梳理得井井有條，甚至貼心地附帶如何安裝、如何調(diào)試的傻瓜式步驟。

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

我們要做的插件功能很簡(jiǎn)單：點(diǎn)擊瀏覽器右上角的插件圖標(biāo)，就能一鍵統(tǒng)計(jì)當(dāng)前網(wǎng)頁(yè)的字?jǐn)?shù)，并估算出閱讀完需要多少分鐘。這不僅實(shí)用，而且涵蓋了插件的核心要素：UI 交互與網(wǎng)頁(yè)數(shù)據(jù)抓取。

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

“我是一個(gè)完全不懂編程的小白。我想用 Manifest V3 規(guī)范寫一個(gè) Chrome 插件，功能是：點(diǎn)擊插件圖標(biāo)后，彈出一個(gè)小窗口，顯示當(dāng)前網(wǎng)頁(yè)的總字?jǐn)?shù)和預(yù)計(jì)閱讀時(shí)間（按每分鐘 400 字計(jì)算）。請(qǐng)幫我規(guī)劃項(xiàng)目目錄，并提供?manifest.json?的代碼?！?/p>

Gemini 3.5 迅速給出了清晰的目錄結(jié)構(gòu)：

manifest.json?(配置文件)

popup.html?(彈窗界面)

popup.js?(業(yè)務(wù)邏輯)

其中，它生成的?manifest.json?符合最新的 V3 標(biāo)準(zhǔn)，聲明了?activeTab?和?scripting?權(quán)限，極其干凈，沒有任何冗余。

第二步：生成交互界面與核心邏輯

接下來是寫界面和提取網(wǎng)頁(yè)內(nèi)容。我繼續(xù)引導(dǎo) Gemini 3.5：

“請(qǐng)幫我寫出?popup.html?和?popup.js?的代碼。要求：界面要現(xiàn)代化，使用簡(jiǎn)潔的卡片式設(shè)計(jì)；JS 代碼要能獲取當(dāng)前活躍標(biāo)簽頁(yè)的 DOM，提取所有文本，過濾掉 HTML 標(biāo)簽，并計(jì)算出準(zhǔn)確字?jǐn)?shù)。”

Gemini 3.5 給出的 HTML 自帶了一段輕量且精美的 CSS 樣式，漸變色背景和圓角卡片，極具現(xiàn)代感。

而在?popup.js?中，它展示了極高的代碼魯棒性。它沒有直接用容易導(dǎo)致跨域報(bào)錯(cuò)的復(fù)雜注入，而是使用了?chrome.scripting.executeScript，通過一行極簡(jiǎn)的匿名函數(shù)在頁(yè)面上下文中提取?document.body.innerText，并進(jìn)行正則過濾。整段代碼沒有任何生澀的第三方庫(kù)，全原生實(shí)現(xiàn)，極易閱讀。

第三步：1 分鐘本地加載跑通

代碼生成后，Gemini 3.5 還給出了小白極其友好的安裝指南：

在電腦上新建一個(gè)文件夾，把上面三個(gè)文件分別保存進(jìn)去。

打開 Chrome 瀏覽器，訪問?chrome://extensions/。

開啟右上角的“開發(fā)者模式”。

點(diǎn)擊左上角的“加載已解壓的擴(kuò)展程序”，選中剛剛新建的文件夾。

搞定！隨便打開一篇文章，點(diǎn)擊瀏覽器右上角的插件圖標(biāo)，當(dāng)前網(wǎng)頁(yè)的字?jǐn)?shù)和閱讀時(shí)間瞬間呈現(xiàn)在精美的卡片上。一次跑通，沒有任何報(bào)錯(cuò)！

行業(yè)趨勢(shì)：人人都是“定制化工具”的造物主

從行業(yè)的角度看，AI 正在徹底重塑“開發(fā)者”的定義。以前，編程是專業(yè)人士的專利；而現(xiàn)在，大模型將底層技術(shù)細(xì)節(jié)（如復(fù)雜的 API、煩瑣的編譯配置）全部封裝隔離。

未來的極客和玩家們，不需要去硬背語(yǔ)法，只需要具備敏銳的“問題定義能力”。只要你有痛點(diǎn)、有創(chuàng)意，配合像 Gemini 3.5 這樣高精度的 AI 助手，就能像搭樂高一樣，隨時(shí)為自己量身定制各種輕量級(jí)工具。這種“個(gè)人軟件定制化”的時(shí)代，已經(jīng)悄然來臨。