> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.
# 从 Plasmo 迁移到 Extension.js
> 分步迁移指南:把基于 Plasmo 的浏览器扩展项目逐步迁移到 Extension.js。将文件约定映射到 manifest.json、转换环境变量、复用 React 组件,并保留现有的内容脚本、后台 service worker、弹窗与选项页面 UI 代码。
[Plasmo](https://www.plasmo.com) 是一个基于 Parcel、采用文件约定式路由的浏览器扩展框架。它的发布节奏已经放缓，工具链相对当前的打包器也开始显得陈旧，这就是许多团队重新评估它的原因。本指南将一个典型的 Plasmo 项目迁移到 Extension.js，且无需重写 UI 代码。
## 哪些会变，哪些不变
**保持不变：** 你的 React 组件、Tailwind 配置、测试、`chrome.*` API 调用，以及你正在使用的 `@plasmohq/storage`（它包装的是 `chrome.storage`，在这里同样可用）。
**会改变：**
* 文件约定式入口（`popup.tsx`、`contents/*.ts`）变成真实 `manifest.json` 中显式的入口。
* `package.json` 中的 `manifest` 字段移入 `manifest.json`。
* `plasmo dev` / `plasmo build` / `plasmo package` 变成 `extension dev` / `extension build --zip`。
* `PLASMO_PUBLIC_*` 环境变量变成 `EXTENSION_PUBLIC_*`。
## 第 1 步：安装 Extension.js
```bash theme={null}
npm install extension@latest --save-dev
npm uninstall plasmo
```
## 第 2 步：编写 manifest
Plasmo 根据 `package.json` 加上文件约定来生成 manifest。Extension.js 把 `manifest.json` 当作事实来源。逐项翻译每个约定：
| Plasmo 约定 | `manifest.json` 条目 |
| ------------------------------- | --------------------------------------------------------- |
| `popup.tsx` 或 `src/popup.tsx` | `"action": {"default_popup": "popup/index.html"}` |
| `options.tsx` | `"options_ui": {"page": "options/index.html"}` |
| `newtab.tsx` | `"chrome_url_overrides": {"newtab": "newtab/index.html"}` |
| `background.ts` | `"background": {"service_worker": "background.ts"}` |
| 带 CS 配置的 `contents/inline.ts` | `"content_scripts": [{...}]` 条目 |
| `package.json` 中的 `manifest` 字段 | 直接合并到 `manifest.json` |
HTML 入口就是普通的 HTML 文件，用来加载你的 React 组件。一个 popup 看起来是这样的：
```html popup/index.html theme={null}
```
manifest 与 `