React TypeScript Web Extension Starter 教程

React TypeScript Web Extension Starter 教程

react-typescript-web-extension-starter :desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire: 项目地址: https://gitcode.com/gh_mirrors/re/react-typescript-web-extension-starter

1、项目介绍

react-typescript-web-extension-starter 是一个基于 React、TypeScript、TailwindCSS、Storybook、Jest、EsLint、Prettier 和 Webpack 构建的 Web 扩展启动器。该项目支持 Google Chrome、Mozilla Firefox、Brave Browser、Microsoft Edge 和 Opera 浏览器。它提供了一个完整的开发环境，帮助开发者快速启动和构建 Web 扩展。

2、项目快速启动

安装依赖

首先，克隆项目并安装依赖：

git clone https://github.com/aeksco/react-typescript-web-extension-starter.git
cd react-typescript-web-extension-starter
yarn install

开发模式

在开发模式下运行项目：

yarn dev

构建生产版本

构建生产版本的扩展：

yarn build

加载扩展

Google Chrome

1. 打开 chrome://extensions/。
2. 启用开发者模式。
3. 点击“加载已解压的扩展程序”，选择项目的 dist 目录。

Mozilla Firefox

1. 打开 about:debugging。
2. 点击“This Firefox”。
3. 点击“加载临时附加组件”，选择 dist 目录中的 manifest.json 文件。

Microsoft Edge

1. 打开 edge://extensions/。
2. 启用开发者模式。
3. 点击“加载已解压的扩展程序”，选择项目的 dist 目录。

3、应用案例和最佳实践

应用案例

• 浏览器扩展开发：使用该项目可以快速启动一个浏览器扩展的开发，支持多种浏览器，适合开发者在不同浏览器环境下进行测试和部署。

最佳实践

• 代码规范：项目已经配置了 EsLint 和 Prettier，建议开发者遵循这些工具的规范进行代码编写，以保持代码的一致性和可维护性。
• 测试：使用 Jest 进行单元测试，确保代码的稳定性和可靠性。
• Storybook：使用 Storybook 进行组件的独立开发和测试，提高开发效率。

4、典型生态项目

• React：用于构建用户界面的 JavaScript 库。
• TypeScript：JavaScript 的超集，提供静态类型检查。
• TailwindCSS：一个实用优先的 CSS 框架，用于快速构建自定义设计。
• Storybook：用于独立开发和测试 UI 组件的工具。
• Jest：一个 JavaScript 测试框架，用于编写单元测试。
• Webpack：模块打包工具，用于构建和打包项目。

通过这些工具和框架的结合，react-typescript-web-extension-starter 提供了一个强大的开发环境，帮助开发者快速构建和部署 Web 扩展。

react-typescript-web-extension-starter :desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire: 项目地址: https://gitcode.com/gh_mirrors/re/react-typescript-web-extension-starter