基于 Vite + React 构建 Chrome Extension (MV3) 开发环境的详尽指南

基于 Vite + React 构建 Chrome Extension (MV3) 开发环境

前言

本指南将从零开始，一步步引导你构建一个基于 Vite + React 的 Chrome Extension (MV3) 开发环境。该开发环境将为你提供现代化的前端开发工具和库，以轻松、高效地开发和调试你的扩展程序。

准备工作

在开始之前，你需要确保以下条件得到满足：

• 已安装 Node.js 和 npm。
• 已安装 Chrome 浏览器。
• 确保你的 Chrome 浏览器已启用开发者模式。

创建扩展程序项目

1. 打开命令行工具，进入一个新的目录。
2. 输入以下命令创建新的 Chrome 扩展程序项目：

npx create-react-app my-extension --template chrome-extension

3. 进入创建的项目目录：

cd my-extension

安装 Vite

1. 在项目目录中安装 Vite：

npm install --save-dev vite

2. 在项目根目录创建 vite.config.js 文件，并添加以下内容：

export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'main.js',
        assetFileNames: '[name].[ext]',
      },
    },
  },
};

配置 Chrome Manifest (MV3)

1. 在 src 目录下创建 manifest.json 文件，并添加以下内容：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "This is a Chrome extension built with Vite and React.",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [],
  "content_scripts": [
    {
      "js": ["content.js"]
    }
  ]
}

开发扩展程序

1. 在 src 目录下创建 popup.js 和 content.js 文件，分别作为弹出窗口和内容脚本的入口文件。

2. 在 popup.js 文件中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const Popup = () => <h1>Hello from Vite + React!</h1>;

ReactDOM.render(<Popup />, document.getElementById('root'));

3. 在 content.js 文件中添加以下代码：

console.log('Hello from Vite + React!');

运行扩展程序

1. 在项目目录中运行以下命令启动 Vite 开发服务器：

npm run dev

2. 打开 Chrome 浏览器的扩展程序管理页面，点击 "加载已解压的扩展程序"，选择项目目录。

3. 扩展程序将被加载并安装到你的浏览器中。

调试扩展程序

你可以使用 Chrome DevTools 对扩展程序进行调试。在扩展程序管理页面中，点击扩展程序旁边的 "检查器" 图标，即可打开 DevTools。

打包扩展程序

1. 在项目目录中运行以下命令构建扩展程序：

npm run build

2. 构建完成后，将在 dist 目录中生成扩展程序的发布版本。

总结

本文介绍了如何使用 Vite + React 构建 Chrome Extension (MV3) 开发环境。该开发环境将为你提供现代化的前端开发工具和库，以轻松、高效地开发和调试你的扩展程序。希望本指南能够帮助你快速上手 Chrome 扩展程序开发。