使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件

码农巧克零

于 2024-09-21 10:22:57 发布

阅读量1k

点赞数 29

分类专栏：程序员前端开发编程文章标签： react.js typescript chrome

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142412305

版权

程序员同时被 3 个专栏收录

138 篇文章 2 订阅

订阅专栏

前端开发

138 篇文章 1 订阅

订阅专栏

编程

138 篇文章 1 订阅

订阅专栏

在这篇文章中，我们将逐步引导完成整个过程，了解如何在 2024 年构建自己的 Chrome 插件。无论是经验丰富的开发者还是刚刚起步，这篇指南都将帮助轻松应对扩展开发的复杂性。

创建一个 React Chrome 插件

是否曾想过创建自己的 Chrome 插件？也许我们有一个绝妙的主意，可以让浏览变得更容易或更愉快。让我们使用现代 Web 技术来创建一个 Chrome 插件：React 用于构建用户界面，TypeScript 提供类型安全，TailwindCSS 用于样式设计，Vite 提供快速的开发体验。通过本文将拥有一个功能齐全的扩展，并具备扩展它的知识。

设置开发环境

安装 Node.js 和 npm

首先，从官方网站下载并安装 Node.js。这也会安装 npm，你将使用它来管理项目依赖项。

创建一个新的 Vite 项目

安装 Node.js 后，打开终端并运行以下命令来创建一个新的 Vite 项目：

bash

代码解读

复制代码

# npm 7+, 需要额外的双破折号： npm create vite@latest my-chrome-extension -- --template react-ts

这个命令会设置一个带有 React 和 TypeScript 的新项目。

理解 Chrome 插件

Manifest 文件概述

每个 Chrome 插件都需要一个 manifest 文件（manifest.json）。这个文件包含关于扩展的元数据，包括其名称、版本、权限和将使用的后台脚本。

Chrome 插件的关键组件

一个典型的 Chrome 插件包括：

后台脚本：在后台运行并处理事件。
内容脚本：注入到网页中以与 DOM 交互。
弹出 UI：点击扩展图标时出现的界面。

将 React 与 Vite 集成

在 Vite 中设置 React

创建 Vite 项目后，导航到项目目录并运行 npm install。

创建第一个组件

在 src 文件夹中创建一个新组件，例如 Popup.tsx：

typescript

代码解读

复制代码

import React from "react"; const Popup: React.FC = () => ( <div className="p-4"> <h1 className="text-lg font-bold">Hello, Chrome Extension!</h1> </div> ); export default Popup;

现在在我们的 App.tsx 文件中，我们需要导入刚刚创建的 Popup.tsx 组件：

typescript

代码解读

复制代码

import Popup from "./Popup"; const App: React.FC = () => { return <Popup />; }; export default App;

为项目添加 TypeScript

安装 TypeScript

如果你选择了 React + TypeScript 模板，TypeScript 已经安装好了。如果没有，你可以通过以下命令添加它：

bash

代码解读

复制代码

npm install --save-dev typescript

配置 TypeScript

在项目根目录中创建一个 tsconfig.json 文件来配置 TypeScript 选项。你可以从一个基本配置开始：

json

代码解读

复制代码

{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"] }

使用 TailwindCSS 进行样式设计

安装 TailwindCSS

要添加 TailwindCSS，运行以下命令：

bash

代码解读

复制代码

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

在 Vite 中设置 TailwindCSS

在你的 tailwind.config.js 中，配置模板文件的路径：

代码解读

复制代码

module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], };

然后，通过在 src/index.css 中添加以下行来包含 Tailwind：

css

代码解读

复制代码

@tailwind base; @tailwind components; @tailwind utilities;

构建你的 Chrome 插件

安装 CRXJS Vite 插件

为了能够打包一个 Chrome 插件，我们需要一个 Vite 插件，它会使我们的工作更轻松，处理诸如 HMR 和静态资源导入等事情。我们可以通过以下命令安装它：

bash

代码解读

复制代码

npm i @crxjs/vite-plugin@beta -D

更新 Vite 配置

更新 vite.config.ts 以匹配以下代码：

typescript

代码解读

复制代码

import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { crx } from "@crxjs/vite-plugin"; import manifest from "./manifest.json"; export default defineConfig({ plugins: [react(), crx({ manifest })], });

在 vite.config.js 旁边创建一个名为 manifest.json 的文件：

json

代码解读

复制代码

{ "manifest_version": 3, "name": "My Chrome Extension", "version": "1.0.0", "description": "A Chrome extension built with Vite and React", "action": { "default_popup": "index.html" }, "permissions": [] }