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

原创已于 2024-09-26 17:38:52 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript #chrome

于 2024-09-21 08:54:13 首次发布

前端框架同时被 2 个专栏收录

38 篇文章

订阅专栏

javascript学习

29 篇文章

订阅专栏

大家好，这里是 Geek技术前线。更多好文欢迎公众号关注 Geek技术前线

创建一个 Chrome 插件是一个有趣的项目，特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS 和 Vite 时

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

创建一个 React Chrome 插件

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

设置开发环境

安装 Node.js 和 npm

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

创建一个新的 Vite 项目

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

# 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：

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 组件：

import Popup from "./Popup";

const App: React.FC = () => {
  return <Popup />;
};

export default App;

为项目添加 TypeScript

安装 TypeScript

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

npm install --save-dev typescript

配置 TypeScript

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

{
  "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，运行以下命令：

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：

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

构建你的 Chrome 插件

安装 CRXJS Vite 插件

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

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

更新 Vite 配置

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

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 的文件：

{
  "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": []
}