Repolode
提交项目
PlasmoHQ

PlasmoHQ/plasmo

面向 React 与 TypeScript 的浏览器扩展框架，统一处理 manifest、构建与热重载配置。

在 GitHub 查看官网
Star
13,168
Fork
465
未关闭 Issue
371
最近提交
16小时前

这是什么？

Plasmo 是一个浏览器扩展开发框架，设计思路类似 Next.js。它省去了扩展开发中大量手动配置的工作，让开发者可以专注于弹出页、设置页、内容脚本和后台 service worker。

框架开箱支持 React 与 TypeScript，也可选择接入 Svelte 或 Vue。它提供基于 React HMR 的热重载、`.env` 环境变量文件、存储 API，以及扩展各组件之间的消息通信 API。内容脚本可以直接在宿主页面中渲染 UI，还支持远程代码打包，例如加载 Google Analytics。

同一套代码可以针对多种浏览器和 manifest 组合进行构建，并通过 Browser Platform Publisher 实现自动化发布。项目支持 macOS、Windows 和 Linux，需要 Node.js 16 或更高版本。项目自述仍处于 alpha 阶段，版本间可能有变化。

核心功能

  • 01开箱支持 React 与 TypeScript，可选 Svelte 和 Vue
  • 02开发时支持基于 React HMR 的热重载
  • 03提供存储 API 与消息 API，用于扩展各部分之间通信
  • 04内容脚本可直接渲染 UI 到宿主页面
  • 05同一代码库可构建多种浏览器与 manifest 目标
  • 06通过 Browser Platform Publisher 实现自动化发布

适用场景

  • 使用 React 和 TypeScript 开发 Chrome 或 Firefox 扩展，无需手写 manifest 配置
  • 通过内容脚本向第三方网站注入基于 React 的界面
  • 用一套代码向多个浏览器及应用商店发布扩展

快速上手

  1. 1

    确认已安装 Node.js 16.x 或更高版本

  2. 2

    安装 pnpm（强烈推荐）

  3. 3

    从模板创建新项目

    pnpm create plasmo example-dir
  4. 4

    进入项目目录并启动开发服务器

    cd example-dir pnpm dev

使用前须知

  • README 称 Plasmo 目前为 alpha 软件，版本之间可能发生变化。
  • 部分功能依赖外部服务（如可选的 Itero 云服务）。

标签

#browser-extension#react#typescript#chrome-extension#firefox-addon#bundler#frontend-framework#edge-addon#parcel#reactjs

常见问题

plasmo 是什么？
面向 React 与 TypeScript 的浏览器扩展框架，统一处理 manifest、构建与热重载配置。 Plasmo 是一个浏览器扩展开发框架，设计思路类似 Next.js。它省去了扩展开发中大量手动配置的工作，让开发者可以专注于弹出页、设置页、内容脚本和后台 service worker。
plasmo 可以免费使用吗？用的什么许可证？
plasmo 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
plasmo 还在维护吗？
活跃维护中。plasmo 最近一次提交是在 2026年10月21日。
plasmo 适合用来做什么？
使用 React 和 TypeScript 开发 Chrome 或 Firefox 扩展，无需手写 manifest 配置 通过内容脚本向第三方网站注入基于 React 的界面 用一套代码向多个浏览器及应用商店发布扩展
plasmo 怎么安装和运行？
确认已安装 Node.js 16.x 或更高版本 安装 pnpm（强烈推荐） 从模板创建新项目: pnpm create plasmo example-dir 进入项目目录并启动开发服务器: cd example-dir pnpm dev
在哪里获取 plasmo？
源代码和安装说明在 GitHub 上：https://github.com/PlasmoHQ/plasmo

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目