Skip to Content
LaunchExt | Chrome 扩展开发平台 (Next.js + Plasmo) 🚀 Read more → 
文档Framework工作流程新建扩展

创建新扩展项目

要启动交互式项目初始化向导,请运行以下命令:

pnpm create plasmo # 或 yarn create plasmo # 或 npm create plasmo

如需跳过项目命名提示,可以直接在命令中指定扩展名称:

pnpm create plasmo "我的超棒扩展" # 或 yarn create plasmo "我的超棒扩展" # 或 npm create plasmo "我的超棒扩展"

提示: 您也可以通过全局安装 plasmo CLI 来直接使用 plasmo 命令:

pnpm i -g plasmo # 或使用其他包管理器替换 pnpm

使用 src 源码目录

默认情况下,Plasmo 期望所有源代码文件位于项目根目录中。如果您更习惯传统的项目结构,可以按照此指南src 目录设置为主源码目录。

自定义入口文件配置

默认创建的项目仅包含一个弹出窗口入口文件。您可以通过 --entry 标志来自定义初始项目包含的入口文件,支持以逗号分隔的多个文件:

pnpm create plasmo --entry=options,newtab,contents/inline # 或 npm create plasmo -- --entry=options,newtab,contents/inline

上述命令将创建包含以下功能模块的项目:

所有可用的入口文件类型请参考官方入口文件目录 

⚠️

重要说明: npm 包管理器不会自动将参数传递给子命令。在使用 npm 时,必须在 plasmo 的参数前添加 -- 来进行参数转义。

基于示例模板创建项目

Plasmo 提供了丰富的示例项目库 ,您可以直接基于这些模板快速创建项目。选择需要的示例,在创建命令中使用对应的模板名称:

pnpm create plasmo --with-env # 或 npm create plasmo -- --with-env

上述命令将使用 with-env 示例模板 来生成项目,该模板演示了环境变量的配置和使用。

🚀

扩展建议: 对于初学者,建议从基础模板开始,逐步添加所需功能。对于有经验的开发者,可以直接选择功能完整的示例模板来加速开发进程。

最后更新于