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