React与TypeScript浏览器扩展开发入门指南

秋玥多

于 2024-09-15 08:32:41 发布

阅读量879

点赞数 24

本文链接：https://blog.csdn.net/gitblog_00015/article/details/142276629

版权

React与TypeScript浏览器扩展开发入门指南

browser-extension-react-typescript-starter 🚀 React & TypeScript Starter for developing web extensions with hot reload! 项目地址: https://gitcode.com/gh_mirrors/br/browser-extension-react-typescript-starter

本指南基于开源项目 sinanbekar/browser-extension-react-typescript-starter，一个为跨平台（Chrome、Firefox、Edge、Opera、Brave）浏览器扩展开发设计的React与TypeScript快速启动模板。

1. 项目介绍

React与TypeScript浏览器扩展开发模板 是一款强大的脚手架，支持热重载(HMR)，允许开发者在多个浏览器平台上快速构建和迭代Web扩展。该模板集成了React、Redux用于状态管理、Vite加速开发流程、以及包括ESLint、Prettier在内的代码质量工具，同时还支持最新的Manifest V3规范和传统的Manifest V2。

2. 项目快速启动

环境需求

Node.js: 版本16或更高。
Yarn: 建议安装以获得更佳的依赖管理体验。

安装步骤

克隆仓库:
```
git clone https://github.com/sinanbekar/browser-extension-react-typescript-starter.git my-extension
```
或者通过模板创建新的GitHub仓库:
- 访问原仓库页面，点击 "Use this template" 创建新仓库。
- 克隆新创建的仓库到本地。
安装依赖: 进入项目目录并执行:
```
cd my-extension
yarn install
```
启动开发服务器:
```
yarn dev
```
这将开启热重载模式。
部署到浏览器:
- Chrome: 打开 chrome://extensions，启用“开发者模式”，点击“加载已解压的扩展程序”选择项目中的 dist 文件夹。
- Firefox: 访问 about:debugging, 点击“此Firefox”下的“临时载入扩展程序”，选择 dist-firefox-v2 文件夹。

3. 应用案例和最佳实践

在构建扩展时，利用Redux进行状态管理是非常推荐的做法。这允许在背景页、弹出窗口、内容脚本等之间无缝共享数据。确保遵循模块化编码原则，合理划分组件和逻辑层。对于性能敏感的部分，可以考虑使用Redux的精选部分(redux-selectors)来减少不必要的数据传递。

示例代码片段

虽然具体代码结构需参照项目本身，但开发时的一个简单场景可能涉及创建一个新的Redux动作和对应的reducer:

// actions.ts
export const ACTION_INCREMENT = 'ACTION_INCREMENT';
export const increment = () => ({ type: ACTION_INCREMENT });

// reducer.ts
import { ACTION_INCREMENT } from './actions';

const initialState = { count: 0 };
const counterReducer = (state = initialState, action: any) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return { ...state, count: state.count + 1 };
        default:
            return state;
    }
};

export default counterReducer;

并在你的组件中连接Redux store:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
        </div>
    );
}

export default Counter;