Plasmo 学习路线图 (一)：搭建你的第一个 Plasmo 扩展项目
帮助零经验Plasmo开发者学习如何一步步完成 Plasmo 开发环境的搭建，并成功创建和运行第一个基础的 Plasmo 扩展项目。
一、环境准备
1.1 安装node.js及npm、pnpm
由于Plasmo是一个基于 node.js开发的框架，所以我们需要在最开始先安装node.js。打开node.js官网的下载页面Node.js — Download Node.js®，如图所示：
有两种方式可以选择，使用命令行安装或者下载安装包安装。安装完成后验证安装即可。需要说明的是，npm是node.js默认的管理工具，安装node.js会自动安装npm。命令如下：
node -v
npm -v
执行结果如图：
因为 pnpm 通常安装速度更快、更节省磁盘空间，尤其适合大型项目**，Plasmo官方强烈推荐使用pnpm管理**，所以我们也安装一下pnpm。我们使用npm安装命令如下：
npm install -g pnpm
安装完成后记得验证一下：
pnpm -v
如图所示：
1.2 编辑器及浏览器
除了开发环境，我们还需要用于写代码的编辑器和用于调试的浏览器。这里我们选择的编辑器是VS Code，浏览器是Chrome浏览器。
VS Code下载地址
Chrome浏览器下载地址
建议多试几遍，如果还不行，可以使用edge浏览器。
edge浏览器下载地址
二、创建项目第一个Plasmo项目
2.1 创建Plasmo项目
首先我们进入到我们的工程目录（workspace），然后在该目录打开终端，并执行创建命令：
pnpm create plasmo
然后根据提示依次输入插件名称、插件描述和作者信息，等依赖下载完成即可。
成功后如图：
我们可以简单看下文件结构：
里面包括：
| 名称 | 描述 |
|---|---|
| .git | git配置目录 |
| .github | 自动化部署的github action工作流目录 |
| assets | 资源目录，Plasmo会自动生成icon，并于manifest的icon.png关联 |
| node_modules | 安装的依赖 |
| .gitignore | 定义git忽略内容文件 |
| .prettierrc.mjs | 编码风格文件 |
| package.json | node.js描述文件，包含一个manifest属性，可以按需自定义Plasmo |
| pnpm-lock.yaml | pnpm lock文件 |
| popup.tsx | 这个文件导出一个默认的 React 组件，该组件将被渲染到弹出页面中。 |
| README.md | 说明 |
| tsconfig.json | TypeScript配置 |
2.2 验证项目
下面为了验证项目，首先我们需要进入目录，然后执行 pnpm dev，如图所示，已经执行成功了。
成功后，项目文件夹里会生成build的相关文件，因为是dev，在build文件夹生成了chrome-mv3-dev文件夹。
然后我们在Chrome浏览器中打开新标签页，输入地址 chrome://extensions，并回车。
然后打开右上角的开发者模式，点击加载已解压的扩展程序，选择项目中的build/chrome-mv3-dev文件夹即可加载插件。
另外，pnpm build会在build目录下生成chrome-mv3-prod目录，就是正式的插件。
网上有一些教程说要加载.plasmo文件夹，但是会报错：清单文件缺失或不可读取。
如图，已经加载成功了。
点击图标，弹出页面：
2.3 热加载
我们打开VS Code编辑器修改一下 popup.tsx的文字来体验一下热加载。
然后点击“重新加载”按钮刷新一下插件，重新点击：
效果如下：
下一步
恭喜你成功搭建了第一个 Plasmo 项目！通过阅读这篇文章，你学会了如何创建、运行和加载扩展。 在下一篇文章中，我们将深入讲解如何开发扩展最重要的部分之一——弹窗（Popup）页面，学习如何使用 React 构建弹窗界面。 希望本教程对你有所帮助，我们下一篇继续。