下面给出一份“5 分钟零配置”方案，让你把 Manifest V3 开发环境跑起来，并附带「热重载 + 源码调试」一条龙脚本。
全部命令 6 行，复制即生效；最后附赠 3 个高阶技巧，方便你直接进阶第②篇。

1. 前置条件（30 s） Node.js ≥ 18
   Chrome ≥ 110（地址栏输入 chrome://version 确认）

2. 一键初始化（60 s）

bash

复制

# 1. 装脚手架（全局一次）
npm i -g plasmo

# 2. 生成项目
plasmo init hello-mv3 && cd hello-mv3

# 3. 依赖装好
pnpm i   # 或 npm i

1. 跑起来（30 s）

bash

复制

pnpm dev

Plasmo 会：

• 自动生成 manifest.json（MV3）

• 启动 TypeScript + React 热重载

• 监听 src 目录，保存即刷新扩展

1. 加载扩展（60 s）

2. 打开 chrome://extensions

3. 右上角「开发者模式」= 开启

4. 点击「加载已解压的扩展」→ 选择项目根目录下的 build/chrome-mv3-prod（dev 模式实际是 build/chrome-mv3-dev）

5. 图标出现 ✅，Popup 点一下能看到默认计数器页面，即成功。

6. 调试三板斧（30 s）

• Popup 页面：右键扩展图标 →「审查弹出内容」→ 独立 DevTools

• Background Service Worker：chrome://extensions → 下方「背景页」→「检查」

• Content Script：打开任意网页 → F12 → Sources → Page → chrome-extension://<id>/content-scripts/...

高阶技巧（先收藏，后续博文用）

1. 环境变量隔离
   在项目根建 .env.development / .env.production，Plasmo 会自动注入：

   PLASMO_PUBLIC_API_URL=https://dev.api.example.com

   代码里直接 process.env.PLASMO_PUBLIC_API_URL 即可，MV3 合规。

2. 自动重载扩展（无需手动点「刷新」）

   pnpm add -D chrome-extension-reloader

   然后在 package.json 脚本里加：

   JSON

   复制

   "dev": "plasmo dev -- --reload"

   保存后 0.5 s 扩展自动重装，告别「刷新按钮」。

3. 一条命令打包上架

   pnpm build:zip

   会生成 hello-mv3.zip（已剔除源码 map、dev 依赖），直接拖到 Chrome Web Store 控制台即可。

下一步（预告第②篇）

• manifest.json 每个字段在 MV3 下的含义与常见报错

• host_permissions / optional_permissions 动态申请演示

• 如何把默认 Popup 换成 Vue/Svelte 栈

把今天的项目 push 到 GitHub，下一篇直接在此基础上迭代。