Published on

Chrome Extension 开发最佳实践（React + TypeScript + TailwindCSS + Vite）

Authors

第一步：使用 Vite 初始化项目

pnpm create vite
# 或者
yarn create vite

输入项目名称，选择 react、typescript + swc，初始化项目

为什么选择 Vite

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

参考：Vite 与其他工具比较

什么是 swc

swc是2019由Kang Dong Yoon发布的，它后面的支持者是Vercel， 号称 babel 杀手。

swc 由 rust 编写，号称比 babel 快 20 倍以上。

Vite 的底层构建支持 Rollup 已经开始着手改进性能，在 v4 中将其解析器切换到 SWC。

第二步： 配置 Vite 打包

现在，你已经有了一个空的项目，这个项目包含由 Vite 脚手架创建的基础的目录结构和配置文件。接下来，我们需要配置 Vite 来打包 Chrome Extension。

Chrome Extension

Chrome Extension 由一个 manifest.json 文件和一些 HTML、CSS 和 JavaScript 文件组成。manifest.json 文件是 Chrome Extension 的配置文件，用于定义插件的主要行为已经对应的脚本，是插件最核心的配置文件。

Chrome 浏览器（或者其他支持 Chrome Extension 的浏览器）会读取 manifest.json 文件，根据其中的配置信息加载插件的各个部分。

{
  "manifest_version": 3,
  "name": "Searchwise",
  "description": "Make your search more wiser",
  "version": "1.0",
  "action": {
    "default_popup": "index.html",
    "default_icon": "vite.svg"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": ["<all_urls>"],
      "run_at": "document_end"
    }
  ]
}

配置 Vite 打包

我们需要将我们的项目通过 Vite 打包成 Chrome Extension 可以识别的结构。包括：manifest.json 以及对应的 HTML、CSS 和 JavaScript 文件。

如果纯手动来对 Vite 进行打包，我们需要对 Vite 进行许多定制化的设置，包括：

  1. 指定多入口打包，将不同的 ts/tsx 文件打包到不同的目录，例如上面例子中的 content.js 和 index.html 需要分开打包。
  2. content script 中不支持使用 esmodule 的 import 语法，对于其处理。
  3. 还有许多可能存在的坑

我们可以使用更加简单的方式，借助 Vite 生态中的 @crxjs/vite-plugin 插件，我们可以轻松实现我们想要的结果。

使用 @crxjs/vite-plugin 插件

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

在项目根目录中加入 manifest.json 文件，manifest.json 文件中的内容如上所示。因为插件会帮助我们去打包和生成对应的文件，所以在根目录的这个 manifest.json 文件中，所有的文件我们可以直接使用未编译的代码文件。

在 tsconfig.node.json 中加入以下配置，用于编译 manifest.json 文件。

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  // 这里加入 manifest.json
  "include": ["vite.config.ts", "manifest.json"]
}

在 vite.config.ts 中加入以下配置，用于配置 @crxjs/vite-plugin 插件。

import { defineConfig } from 'vite';

import { crx } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react-swc';

// 这里 import manifest.json 文件
import manifest from './manifest.json';

export default defineConfig({
  plugins: [react(), crx({ manifest })]
})

OK，现在我们项目已经可以进行编译运行了。使用 pnpm build 试试吧。

第三步：引入 TailwindCSS

Tailwind CSS 是一个非常优秀的 CSS 框架，它提供了一套丰富的 CSS 类，可以帮助我们快速构建页面。在 Chrome Extension 开发中，我们也可以使用 Tailwind CSS 来快速构建我们的插件页面。

这里我们根据 Tailwind CSS 的理念，抛弃掉传统的方式，不使用 PostCSS。

pnpm install -D tailwindcss
npx tailwindcss init

修改 tailwind.config.js 文件

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在我们的项目根目录中创建一个 input.css 文件，在其中引入 Tailwind CSS。

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

为了方便每次启动 tailwindcss 脚手架，在 package.json 中加入一个 tailwind 命令：

 "tailwind": "npx tailwindcss -i ./src/input.css -o ./src/index.css --watch"

使用 pnpm run tailwind 启动 Tailwind CSS 的编译。

OK，到这里整个框架已经搭建完成了，你可以开始开发你的 Chrome Extension 了。

Discuss on Twitter • View on GitHub