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

创建一个 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：

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 已经安装好了。如果没有，你可以通过以下命令添加它：

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 以匹配以下代码：

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

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

测试你的扩展

在 Chrome 中加载扩展

现在你已经准备好了一切，是时候在浏览器中进行测试了。如果你还没有在终端中启动 Vite，可以通过运行 npm run dev 来启动。

默认情况下，当你点击扩展时应该会看到一个弹出窗口。该弹出窗口的内容来自 App.tsx 组件中的 Popup.tsx 组件。

要测试你的扩展，打开 Chrome 并导航到 chrome://extensions。启用 开发者模式 并点击 加载已解压的扩展程序。选择项目的 dist 文件夹。

调试技巧

如果某些东西不起作用，请检查控制台中的错误。你可以通过右键点击扩展弹出窗口并选择 检查 来访问控制台。

发布你的扩展

准备提交

在发布之前，确保你的扩展符合 Chrome 网上应用店的政策。你可能需要创建一个宣传图片并撰写详细的描述。

在 Chrome 网上应用店发布

前往 Chrome 网上应用店开发者控制台，创建一个新项目，并上传你的扩展包（项目的 zip 文件）。按照提示完成提交。

结论

使用 React、TypeScript、TailwindCSS 和 Vite 创建一个 Chrome 插件是提升开发技能的好方法，并通过尝试新功能和技术不断学习。

参考

How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite