Plasmo: 构建浏览器扩展的终极框架

Plasmo: 构建浏览器扩展的终极框架

plasmo🧩 The Browser Extension Framework项目地址:https://gitcode.com/gh_mirrors/pl/plasmo

一、项目介绍

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>
    );
}

四、典型生态项目

Plasmo社区拥有活跃且多元化的插件生态系统. 这里列出了一些基于Plasmo打造的知名插件, 从这些优秀作品中汲取灵感对于初学者十分有益.

以下是几个值得一试的Plasmo插件示例:

• Plasmo Storage: 展示了如何使用Plasmo的Storage API来保存和读取数据.
• Plasmo UI Kit: 包含一系列用于快速搭建美观的用户界面的组件.
• Plasmo Proxy: 一个代理服务器的实现, 使插件能够透明地拦截和修改网络请求.

---

以上就是关于Plasmo的简介和快速上手指南. 我们期待你在Plasmo的世界里创造出更多创新的浏览器插件! 如果有任何疑问或者遇到难题, Plasmo社区随时欢迎你的加入.

plasmo🧩 The Browser Extension Framework项目地址:https://gitcode.com/gh_mirrors/pl/plasmo