如何使用 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 项目:

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 中,配置模板文件的路径:

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

测试你的扩展

在 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

相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
小牛itbull5 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
守城小轩10 小时前
Chromium127编译指南 Mac篇(五)- 编译Chromium
chrome·chrome devtools·指纹浏览器·浏览器开发
FinGet16 小时前
那总结下来,react就是落后了
前端·react.js
王解20 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
鸿蒙开天组●1 天前
鸿蒙进阶篇-网格布局 Grid/GridItem(二)
前端·华为·typescript·harmonyos·grid·mate70
zhizhiqiuya1 天前
第二章 TypeScript 函数详解
前端·javascript·typescript
浏览器爱好者1 天前
Chrome与火狐哪个浏览器的移动版本更流畅
前端·chrome