超详细 Chrome 教程，从浏览搜索到上架扩展，有人靠这个月入 2 万美元

大家好，我是想风！

今天来看 Chrome (Google Chrome)，本篇写给新手小白，新手也能学会！

它是全世界用得最多的浏览器，桌面端和移动端都是。

好用、免费、扩展生态最大——这些是明面上的。真正拉开差距的是两件事：

一是它有一堆没人告诉你的操作方式，学会了每天能省下十几分钟。

二是它允许你自己改它。写一个扩展装进去，浏览器就变成你自己的工具了。以前这需要会写代码，现在有 AI 代劳。

这篇分两半。

上篇讲第一个——把 Chrome 从「会点」练到「点得快」。全是能立刻用上的操作。

下篇讲第二个——用 Vibe Coding 从零做一个自己的扩展，再做上架 Chrome 应用商店。全程不用手写多少代码。

先把标题里那个数字交代清楚，免得读到后面觉得被钓了。

Superpower ChatGPT，一个 Chrome 扩展，一个人做的。下载量约 26 万，作者在访谈里说月收入 2 万美元上下。

这是他自己的说法，不是审计过的账面，也不代表普遍情况。

一个扩展、一个人、不融资，这条路是通的。但通的人不多——具体数字在第十二节。

这篇教你走到「上架」那一步。收钱是上架之后的事，放在第十二节。

友情提醒：本篇幅字数过多，读完费时较长，可以点赞先收藏，选择性阅读，用到再查阅！

目录

上篇·把浏览器用快

• 开始之前：把 Chrome 装上 —— 四种装法

• 一、先理清几个基本盘 —— 版本、账号、同步，以及为什么值得花时间学它

• 二、地址栏是最强入口 —— 搜索运算符 t b h @，比鼠标快十倍

• 三、标签页：别用眼睛找，用键盘找 —— 快捷键和标签页分组

• 四、书签·历史·下载 —— 三个面板的打开方式和批量操作

• 五、开发者工具 —— 不只是给程序员用的

• 六、chrome:// 里的隐藏开关 —— 内存、实验功能、扩展管理

下篇·自己写一个扩展

• 七、扩展是什么·最小的一个长什么样 —— 目录结构和一个跑得起来的 hello world

• 八、MV3 的三块积木 —— 清单、后台、内容脚本、弹窗，各管什么

• 九、用 Vibe Coding 把第一个扩展写出来 —— 需求怎么描述，代码怎么验证

• 十、调试：三个入口，三种错 —— 扩展调试和网页调试不是一回事

• 十一、上架 Chrome 应用商店 —— 5 美元、一次审核、几个必填项

• 十二、上架之后：扩展怎么赚钱 —— 商店自己不管收钱，四条路，和两个真实案例

• 常见坑 —— 九个会卡住的地方

• 速查表 —— 快捷键和地址栏语法

• 最后 —— 从哪一步开始

上篇 把浏览器用快

开始之前：把 Chrome 装上

装过的跳过这一节，直接看第一节。

• 官网（首选）：打开 google.com/chrome，页面自己认出你的系统，点下载，装完打开就是。

• macOS：习惯命令行就一行 brew install --cask google-chrome。

• Windows：Win10 1809 以后自带 winget，一行 winget install --id Google.Chrome -e。

• Linux：官网给 deb 和 rpm 两种包，按自己的发行版挑一个。

两条提醒。 第一，认准 google.com/chrome 这个域名——第三方下载站的 Chrome 很多带捆绑，站名再像也别点。第二，官网打不开是网络的事，不是装的问题，这个前提第一节会说到。

一、先理清几个基本盘

Chrome 分桌面版和移动版，桌面版覆盖 Windows、macOS、Linux。这篇讲桌面版。

版本号现在是三位数，更新节奏大概每四周一个大版本。绝大多数更新是安全修复和性能，不用管。但有两种情况得留意：

一是大版本更新偶尔会改扩展的加载规则，自己写的扩展突然加载失败，先看一眼是不是这类问题。

二是**chrome://flags 里的实验功能**会随版本增删，今天能开的开关，三个月后可能没了。

账号和同步：登录 Google 账号之后，书签、密码、历史、已装的扩展会跟着账号走。换电脑登录一下，环境就回来了。

不用 Google 账号也能用，只是没有同步。国内网络环境下登录需要额外的网络条件，这是前提，不是这篇要解决的问题。

为什么值得花时间学？ 因为浏览器是每天开得最久的软件。这里省下的每一分钟，是一天里重复次数最多的那一分钟。

二、地址栏是最强入口

地址栏（Omnibox）不只是输入网址的地方。它是整个浏览器的命令中心。

2.1 三个基础操作

Ctrl + L、Alt + D 或 F6 都是「聚焦地址栏并全选」，方便直接重打。

2.2 本地搜索运算符：t b h @ tab

这五个语法是 Chrome 自己带的，搜的是本机数据，不联网。Chrome 131 之后索引更细了，标签页开得多的人收益最大。

t 是最常用的一个。 开三十个标签页，想回到刚才那个，不用一个个点——Ctrl + L，打 t，再打两个关键词，回车。

一个已知的小毛病：如果某个标签页被内存节省模式冻结了，而且标题是 JS 动态生成的，t 可能搜不到它。点开那个标签页等三秒，或者临时关掉内存节省模式，就能搜到了。

2.3 Google 搜索运算符

地址栏里可以直接用 Google 的搜索运算符，这是上篇唯一联网的部分：

filetype:pdf 出海营销方案
site:github.com chrome extension manifest v3
intitle:教程

filetype: 限定文件类型，site: 限定站点，intitle: 限定标题里含某个词。

一条经验：先想清楚要哪种资料，再决定用哪个运算符。 找白皮书加 filetype:pdf，找官方文档加 site:，比翻三页搜索结果快。

三、标签页：别用眼睛找，用键盘找

3.1 快捷键

Ctrl + Shift + T 是救命键。 关错了，不用去历史记录里翻。

Ctrl + 1 到 Ctrl + 9 是定点跳。 常驻的几个网站固定在前几个标签位，用位置记，比用标题找快。

3.2 标签页分组

右键任意标签页，选「向新组添加标签页」，就能起一个组。点击组名旁的彩色圆圈可以改名、换色、收起。

收起的组只占一小条，点一下展开。一个窗口里塞五六个项目，靠分组能压成一排。

拖动组名能整组重排。地址栏里用 tab 组名 可以直接搜到分组的标题。

四、书签·历史·下载

Ctrl + Shift + D 是里面最被低估的一个。

一次调研开了二十个标签页，与其一个个存，不如整批存成一个文件夹，命名成调研主题。下次打开这个文件夹，二十个页面一起回来。

书签管理器里能建文件夹、拖拽排序、批量导入导出。登录账号后自动同步。

五、开发者工具

开发者工具不只是给程序员用的。三个日常场景：

看某个元素为什么长这样。 Ctrl + Shift + C 点一下页面上的东西，右边直接显示它的 HTML 和 CSS。

模拟手机。 开发者工具左上角有个手机图标，点开就能切换到移动端视图，调好宽度再看自己的网页在手机上的样子。做网站的人天天用。

找出是哪个标签页在吃内存。 Shift + Esc 打开 Chrome 自己的任务管理器，跟 Windows 的任务管理器一样，按内存排序，揪出那个偷偷跑满 CPU 的页面。

六、chrome:// 里的隐藏开关

在地址栏输入 chrome:// 开头的地址，能进浏览器自己的内部页面。几个常用的：

chrome://settings/performance

chrome://flags 要格外小心。 里面的开关是实验性的，随时可能消失或者引起异常。只开你明确知道用途的，开完出问题就点「重置为默认」。

chrome://discards 是个诊断工具。 标签页莫名其妙重载、切回去要重新加载，来这里看是不是被冻结了。

上篇到这里。接下来是下篇——不只被动地用，而是让浏览器干你想让它干的事。

下篇 用 Vibe Coding 写一个 Chrome 扩展

七、扩展是什么·最小的一个长什么样

一句话：扩展就是一个装在浏览器里的小程序，它能看到你打开的网页，也能改这些网页的样子。

Chrome 扩展的标准目录结构：

my-extension/
├── manifest.json          # 清单文件，扩展的身份证
├── background/
│   └── service-worker.js  # 后台脚本
├── content/
│   └── content-script.js  # 注入网页的脚本
├── popup/                 # 点图标弹出的界面
│   ├── popup.html
│   └── popup.js
├── options/               # 设置页（可选）
├── icons/                 # 图标，16 / 48 / 128 三种尺寸
└── _locales/              # 多语言（可选）

最小的扩展只要两个文件：manifest.json 加一个图标。

manifest.json 必须写 "manifest_version": 3。

V3 是现行标准，V2 的扩展在新版 Chrome 里已经加载不了。网上很多老教程写的是 V2，照着抄会直接报错——这是新手最容易踩的第一个坑。

八、MV3 的三块积木

V3 里有三块积木，各管一件事。分不清它们，后面每个 bug 都会找错地方。

8.1 manifest.json：清单

它声明这个扩展叫什么、要什么权限、有哪些组成部分。关键字段：

• manifest_version：必填，填 3

• name / version / description：名称、版本号、一句话说明

• permissions：要哪些权限，比如 activeTab

• action：点图标弹出来的那个界面

• background：后台脚本

• content_scripts：注入哪些网页、注入哪个脚本

• icons：图标

完整的例子在 9.3，那份可以直接抄。

改了 manifest.json 之后，必须去 chrome://extensions 手动点那个扩展卡片上的刷新按钮。 按浏览器的 F5 没有用，重启浏览器也没有用——这是问得最多的一个问题。

8.2 Service Worker：后台

它是扩展的常驻逻辑，负责处理事件、调 API、做跨标签页的协调。

三条规矩记牢：

没有 DOM。 不能弹 alert，不能操作 localStorage，要存数据用 chrome.storage.local。

会被回收。 大约三十秒没活动就被终止，内存里的全局变量全丢。不要用全局变量当缓存，该存就存。

要定时，用 chrome.alarms。 不能靠 setInterval 撑着——后台都被关了，定时器自然也没了。

监听消息时要 return true 才能异步回应。忘了这行，消息通道会在 Promise 结束前就关掉。

8.3 Content Script：注入网页的脚本

它运行在网页里，能读写页面上的 DOM。

两个必须知道的限制：

matches 要写全协议和域名。 https://example.com/\* 匹配不到 http://example.com。写错一个字符就整个不生效，而且不报错。

它跑在隔离世界。 能改页面，但拿不到页面自己的 JS 变量和函数。需要调用页面的函数时，得往页面里插一个 <script> 标签，或者用 chrome.scripting.executeScript()，这条路要额外申请 scripting 权限。

前端路由切换页面时，content script 不会重新注入。 单页应用从 A 页跳到 B 页，脚本还是最初加载的那一份。要监听的话得自己处理。

8.4 Popup：点图标弹出来的那一小块

它就是一个普通网页，加一个 JS。有完整的 DOM，能写任意 HTML 和 CSS。

弹窗只在打开时存在。 关掉就销毁，里面的变量全部清空。要留状态，存到 chrome.storage。

九、用 Vibe Coding 把第一个扩展写出来

9.1 这一节要做什么

做一个扩展：点一下图标，把当前页面的标题和链接复制成 Markdown 格式。

为什么挑这个？三个原因。它有真实用途——写文章、发推特、整理资料的时候都要这个格式。它够短，三个文件搞定。它正好用上 activeTab 权限和剪贴板 API，是个完整的例子。

Vibe Coding 的意思是：把需求讲清楚，让 AI 把代码写出来，人负责验证和提修改意见。

9.2 需求怎么描述

对着 AI 编辑器（Claude Code、Cursor、Codex 都行）说清楚四件事：

帮我写一个 Chrome 扩展，Manifest V3。

功能：点击扩展图标弹出一个小窗，里面有一个按钮。点按钮后，把当前标签页的标题和网址复制成 Markdown 链接格式，就是 [标题](网址) 这种，复制到剪贴板，并在弹窗里显示「已复制」。

要求：
1. 权限只用 activeTab，不要用 tabs，避免安装时的隐私提示
2. 弹窗宽度 220 像素
3. 图标先留空，我自己放
4. 文件按标准结构放：manifest.json、popup/popup.html、popup/popup.js

描述需求的关键是把「不要什么」也写出来。 第 1 条就是——AI 默认可能给你加 tabs 权限，那会让安装页跳出一句吓人的「读取您的浏览记录」。

9.3 生成出来的东西长什么样

manifest.json：

{
  "manifest_version": 3,
  "name": "页面标题复制",
  "version": "1.0",
  "description": "把当前页面的标题和链接复制成 Markdown 格式",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup/popup.html"
  },
  "icons": {
    "128": "icons/icon128.png"
  }
}

popup/popup.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <style>
    body { width: 220px; font-family: system-ui, sans-serif; padding: 12px; margin: 0; }
    button { width: 100%; padding: 8px; cursor: pointer; }
    #out { margin-top: 8px; font-size: 12px; color: #666; word-break: break-all; }
  </style>
</head>
<body>
  <button id="copy">复制为 Markdown 链接</button>
  <div id="out"></div>
  <script src="popup.js"></script>
</body>
</html>

popup/popup.js：

// 点按钮 → 拿当前标签页 → 拼成 Markdown → 写剪贴板
document.getElementById('copy').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const md = `[${tab.title}](${tab.url})`;

  await navigator.clipboard.writeText(md);

  document.getElementById('out').textContent = '已复制：' + md;
});

这里有个知识点值得停顿一下。 代码用的是 activeTab 权限，不是 tabs。

tabs 权限会让用户在安装时看到「读取您的浏览记录」这句提示，转化率直接掉一半。activeTab 是另一套模型：用户点击扩展图标的那一刻，这个标签页才对扩展临时开放。 点击之前读不到，点击之后能读到，用完失效。

这也是为什么 chrome.tabs.query 在没有 tabs 权限的情况下，依然能拿到 tab.title 和 tab.url——因为用户刚刚点了图标。

9.4 装进浏览器

1. 打开 chrome://extensions

2. 打开右上角的「开发者模式」

3. 点「加载已解压的扩展程序」，选中扩展所在的文件夹

装好之后，工具栏上会出现图标（没放图标的话是一个灰色拼图块）。点一下，弹窗出来，点按钮，Markdown 链接就在剪贴板里了。

建议另建一个 Chrome 配置文件专门做开发。 开发中的扩展权限乱、会报错，混在日常浏览器里很烦。右上角头像 → 添加，建一个干净的配置文件。

9.5 接着改需求

第一版跑通之后，就是不断加需求。每加一条，回到 AI 那边说清楚，再验证一遍：

加一个「复制为纯链接」的按钮，只要网址不要标题。

弹窗里显示当前页面标题的前 30 个字符，超出的部分用省略号。

加一个快捷键 Ctrl + Shift + Y，不用点图标也能触发。

Vibe Coding 的节奏是一小步一验证。 一次改太多，出了问题分不清是哪一条引起的。

十、调试：三个入口，三种错

扩展的调试比网页麻烦，因为代码跑在三个不同的地方，各自有各自的检查方式。

三个最常见的报错：

Could not establish connection. Receiving end does not exist. 往一个没有监听者的地方发消息了。可能是 content script 没有注入成功（matches 写错了或者页面不匹配），也可能是页面还没加载完就发了。检查 matches，或者把发送时机往后挪。

Failed to fetch 跨域请求缺权限。这个报错最坑的地方是它不会告诉你缺哪个权限。对照 manifest.json 里的 host_permissions 和 permissions 一个个补，改完记得点刷新。

改了代码没生效 按顺序排查三件事：改的是不是 manifest.json（是的话要去 chrome://extensions 点刷新）；改的是不是 content script（是的话要重新加载目标网页）；改的是不是 popup（关掉弹窗再打开一次就行）。

十一、上架 Chrome 应用商店

自己用够了，下一步是让别人也能装。

11.1 注册开发者账号

入口是 Chrome 应用商店的开发者后台。用 Google 账号登录，交一次性 5 美元注册费。 https://chrome.google.com/webstore/devconsole/register

三点注意：

• 五美元是一次性的，之后上架和更新都不再收费，但不退款

• 交完要做身份验证，并设置发布者名称和联系邮箱——这两个会公开显示在商店页面上

• 中国大陆的银联卡不被接受，得用支持境外支付的信用卡

11.2 打包和上传

把扩展文件夹压成 .zip。

关键：manifest.json 必须在压缩包的根目录，不能包在一层文件夹里。 这一条不过，审核直接打回，而且新手很难意识到问题出在压缩层级上。

上传之后要填这些：

11.3 权限说明是审核的重点

每一个申请的权限，都要单独写清楚为什么需要它。

写得敷衍是最常见的被拒原因。 activeTab 就写「用户点击扩展图标时，读取当前页面的标题和网址，用于生成 Markdown 链接」——把谁触发、读了什么、拿来干什么说全。

11.4 审核

提交后进入审核队列，常规审核时间一般为 1 到 5 天，大部分在 24 小时到 3 天左右完成。带 debugger 这类敏感权限的会转人工，更慢。

几个常见的被拒理由：

• 申请的权限和扩展的单一用途对不上

• 隐私政策 URL 打不开（GitHub Pages 首次部署可能短暂 404，等五到十分钟再试）

• 扩展必须能独立提供价值，不能强依赖某个外部程序

• 权限被判定过度

被拒不代表结束，改完可以重新提交。 首次通过后，商店会给扩展分配一个永久 ID。

十二、上架之后：扩展怎么赚钱

12.1 先说机制：商店自己不管收钱

Google 早年有一套自己的支付系统，2020 年关掉了。现在扩展里要收费，得接第三方——Paddle、ExtensionPay、DodoPayments、Fungies 这一类。

模式是：用户在你自己搭的网页上付款，扩展里拿一个许可码去校验，通过就解锁。

所以「上架」和「收钱」是两件事。上架 5 美元就够，收钱要另外搭一套。

12.2 四条路

还有一条走 B 端的：白标或企业授权。收入上限最高，但要谈客户，不适合一个人起步。

12.3 AI 类的扩展为什么大多走订阅

因为它有持续成本。

一个月收 10 美元，用户调五百次模型，光 API 就吃掉了。一次性买断更麻烦——收一次钱，之后每次调用都是自己贴。

所以接大模型的扩展，常见做法是订阅包里含固定额度，超了再买加量包。

12.4 技术上怎么接

一条最小可用的链路：

1. 用 chrome.storage.local 记免费额度，比如每天 5 次

2. 到顶了，弹窗里出升级提示

3. 点提示跳到你自己的网页，用第三方平台结账

4. 结账后拿到一个许可码，让用户填进扩展

5. 扩展拿这个码去平台校验，通过就解锁

第 3 步是跳到网页的，这条卡得比较死。 扩展里不能直接收钱。

12.5 卡哪个功能，比定多少钱重要

要卡的是「重度用户天天要用、免费用户偶尔用不到」的功能，不是「不付钱就没法用」的基础功能。

拿截图扩展举例：免费截无限张，录屏和云同步收费。基础功能一卡，用户直接卸载，连升级页都看不到。

还有一条经验：付费墙要反复试，不是定一次就不动。

这条是给已经有下载量的扩展的。新扩展先解决「有没有人装」。

12.6 两个真实的案例

Superpower ChatGPT。 就是前面提过的那个。值得再记一笔的是它的节奏：前九个月全免费，先把用户做起来，之后才加付费层——加的是新功能，不是把原来的免费功能收回去。

Circle 阅读助手。 中国开发者染河做的阅读模式扩展，2021 年上线。走的是另一条路：核心功能永久免费，高级功能一次性买断，不搞订阅。收入没有公开。 列在这儿是因为它说明买断制在中文用户里也走得通，不是因为有个数字可以抄。

12.7 泼一盆冷水

两组数字放一起看才完整。

一组：112 个「收入可核实」的扩展里，只有 6.3% 到过 1000 美元一个月。

另一组：一份支付服务商的报告说，付费扩展的中位月收入是 4830 美元。注意这份报告统计的是「已经在收钱的扩展」，卖不动的根本没进样本。它不是新手的预期值。

上过新闻的那 2 万美元，是幸存者。做出来、上架、有人装、有人付钱、付的钱盖过成本——中间隔着五道坎，一道一道在筛人。

12.8 平台风险

这一点最容易忽略：生意建在别人的地盘上。

Google 已经关过一次商店自己的支付系统。宿主平台改界面也一样——Superpower 是靠给 ChatGPT 补功能起来的，OpenAI 哪天自己做文件夹，它的核心价值就少一半。

能做的对冲是把账号、数据、账单放在自己的网站上，扩展只当客户端。浏览器那边真出事，丢的是入口，不是生意。

先做出来，先上架，先有下载量。收费是第五步，不是第一步。

常见坑

照着 V2 的教程写——manifest_version 必须写 3，V2 的写法加载不了，报错也不说版本不对。

改了 manifest 没刷新——要去 chrome://extensions 点卡片上的刷新按钮，按 F5 和重启浏览器都没用。

matches 写漏协议——必须写全 https://example.com/\*，写错不报错，只是整个不生效。

Service Worker 里存全局变量——三十秒空闲就被回收，要持久化用 chrome.storage。

消息监听忘了 return true——忘了通道提前关闭，前端一直收不到回应。

以为 popup 里能存状态——弹窗关闭即销毁，状态存 chrome.storage。

一个请求权限吓得用户不敢装——能用 activeTab 就别用 tabs，后者安装时会提示「读取您的浏览记录」。

打包时 manifest.json 埋进了一层文件夹——压缩包根目录就得是 manifest.json，压错层级是审核被打回的常见原因。

chrome://flags 随手开——实验性开关随时会崩，出问题先点「重置为默认」。

速查表

快捷键

地址栏语法

扩展开发速查

最后

这篇的两个部分难度差得很远，别一起上。

先把上篇那五个地址栏语法用熟。 t、b、h 这三个，一天之内就能变成肌肉记忆，收益立刻兑现。这是投入产出比最高的一段。

下篇建议从第七、八节读完就动手。 不要等到把 MV3 的所有概念都搞清楚才开始——扩展开发里大部分知识是在改 bug 的过程中长出来的。先让那个复制链接的小扩展在浏览器里跑起来，再回头看第八节那三块积木，理解会完全不一样。

Vibe Coding 省掉的是写代码那一步，不是理解那一步。知道 manifest 里的权限在管什么、知道 service worker 为什么不能存全局变量——这些还得自己过一遍。 不然 AI 给你一段能跑但有坑的代码，你连它在哪埋雷都看不出来。

别冲着那 2 万美元来。冲着「做一个自己用得上的扩展」来——钱是后面的事。

我是想风@xaiwind，一个关注出海与 AI、AIGC 的创作者。

本文基于AI辅助与个人实践融合创作，如果文章对你有帮助，欢迎点赞、收藏、关注，

本人文章持续维护，欢迎联系或者评论区见，每天进步一点，我们终会到达目的地！

附录·本文参考

• Chrome 官方快捷键说明与浏览提示

• Chrome for Developers：Manifest V3 迁移指南、Service Worker 事件处理文档

• Chrome 应用商店开发者后台的发布要求与审核说明

• Chrome 131 地址栏本地搜索语法说明

• 扩展变现数据：crxpay 2026 State of Chrome Extensions 报告（统计口径为「已在收费的扩展」）；BigIdeasDB 对 112 个收入可核实扩展的统计

• 案例：Superpower ChatGPT 作者的公开访谈；Circle 阅读助手作者染河的公开说明

• Chrome 应用商店开发者支付系统的关停说明与第三方许可校验方案