【亲测免费】 Plasmo: 构建浏览器扩展的终极框架

2026-01-16 10:41:55作者：何举烈Damon

一、项目介绍

Plasmo 是由技术爱好者为技术爱好者打造的一款功能丰富的浏览器扩展SDK. 它解决了构建浏览器插件时常见的配置文件复杂性和特异性的烦恼, 被誉为是浏览器插件开发领域的Next.js.

主要特性:

顶级React+TypeScript支持: 确保了高性能和可维护性.
声明式开发: 让开发者聚焦于核心逻辑而不是细节处理.
Content Scripts UI Tab Pages: 提供多种界面选项以适应不同的使用场景.
实时重载+React热模块替换(Hot Module Replacement): 大幅提升开发效率.
环境变量文件(env files)* 和 存储API: 方便设置和管理全局状态.
消息传递API: 实现插件间通信.
远程代码捆绑: 如Google Analytics等服务的集成变得轻松.
多目标支持: 同一份代码可以部署到多个不同类型的浏览器(例如Chrome, Firefox).
自动化部署: 经过Browser Platform Publisher优化的部署流程.
Svelte和Vue的可选支持: 满足不同开发者的需求.

系统要求:

Node.js版本16及以上.
MacOS, Windows或Linux操作系统（强烈推荐）.
使用pnpm作为包管理器.

二、项目快速启动

安装依赖

首先确保你的系统中已经安装Node.js和pnpm, 接下来通过以下命令克隆并初始化plasmo项目:

# 克隆仓库
git clone https://github.com/PlasmoHQ/plasmo.git my-plasmo-project
cd my-plasmo-project

# 初始化依赖
pnpm install

创建新项目

在项目目录下运行以下命令来初始化一个新的Plasmo插件:

npx create-plasmo-app@latest my-extension
cd my-extension
pnpm dev

此时, 浏览器应该自动打开一个标签页显示你的插件UI, 你可以立即开始编辑src/index.tsx文件进行开发.

接下来的部分将涵盖更高级的应用案例、最佳实践以及Plasmo生态系统中的明星项目.

三、应用案例和最佳实践

用Plasmo实现Firebase认证

为了展示Plasmo如何与其他web平台如Firebase结合, 下面演示了使用Firebase进行身份验证的基本步骤.

步骤1: 添加Firebase

在你的Plasmo项目中添加Firebase, 首先你需要在Firebase控制台中创建一个新项目.

步骤2: 集成Firebase SDK

修改src/background/index.ts, 引入Firebase SDK:

import * as firebase from "firebase/app";
// Import specific Firebase modules if needed
import "firebase/auth";

const firebaseConfig = {
    // ... Your Firebase config goes here ...
};

firebase.initializeApp(firebaseConfig);

然后, 利用firebase.auth()模块进行登录操作.

最佳实践: 使用Redux进行状态管理

当插件需要复杂的跨组件状态管理时, Redux是个不错的选择. 在Plasmo项目中集成Redux的过程与普通前端项目类似, 只是在引入Redux之后还要考虑将其与Plasmo的生命周期相协调.

步骤1: 安装Redux及相关库

pnpm add redux @reduxjs/toolkit react-redux

步骤2: 创建store及reducer

在适当位置创建并导出store:

import { configureStore } from '@reduxjs/toolkit';
import myReducer from './myReducer';

export default configureStore({
    reducer: {
        main: myReducer,
    },
});

最后, 不忘在主要入口文件中连接Redux store与React组件:

import { Provider } from 'react-redux';
import store from './store';
import App from './App';

function Root() {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
}