启动开发服务器

项目初始化完成后，进入项目目录并运行以下命令开始开发您的扩展：


pnpm dev
# 或
npm run dev
# 或
plasmo dev

Plasmo 会为您的扩展创建开发构建包并启动实时重载的开发服务器。当文件发生变更时，系统会自动更新扩展包，并在源代码修改后重新加载浏览器。同时，扩展名称前会添加 DEV | 前缀，图标会转为灰度显示，以便清晰区分开发版和生产版的扩展包。

加载扩展到浏览器

我们计划在未来实现自动化加载流程，但目前需要您手动执行以下步骤在 Chrome 中加载扩展：

启用开发者模式

要查看扩展的弹出窗口，请点击 Chrome 工具栏上的拼图图标，然后选择您的扩展。

专业提示： 点击固定图标按钮可将扩展固定在 Chrome 工具栏上，方便快速访问。

固定弹出窗口

使用 Plasmo 构建时，您创建的是跨浏览器的 Plasmo 扩展，而非特定于某个浏览器的扩展。这意味着您可以通过少量调整，构建出适用于所有支持浏览器的统一扩展。

使用 --target 标志可以指定目标浏览器和清单版本的组合：


plasmo dev --target=firefox-mv2

构建完成后，包文件将位于 build/firefox-mv2-dev 目录中。

有关官方支持的目标列表，请查看此链接。

默认情况下，Plasmo 在开发过程中会为扩展生成源映射文件。如需禁用此功能，可以使用 --no-source-maps 标志：


plasmo dev --no-source-maps

这在某些依赖库与源映射功能存在兼容性问题时特别有用。

开发服务器默认绑定到 localhost 主机和 1012 端口。您可以通过以下标志自定义这些设置：


plasmo dev --serve-host=localhost --serve-port=1012

热模块重载（HMR）WebSocket 默认绑定到 localhost 主机和 1815 端口，构建报告器则绑定到 HMR 端口 + 1（默认 1816）。如需调整这些设置：


plasmo dev --hmr-host=localhost --hmr-port=1815

💡

调试建议： 在开发过程中，建议保持浏览器开发者工具打开，这样可以实时查看控制台输出和网络请求，便于快速定位和解决问题。

⚠️

注意事项： 某些浏览器可能会对扩展的自动重载行为有特殊限制。如果遇到重载不生效的情况，请尝试手动刷新扩展或重启浏览器。