使用 React 和 Manifest V3 轻松构建 Chrome 扩展程序

2024-02-07 10:21:51

使用 React 和 Manifest V3 构建 Chrome 扩展程序：一步步指南

简介

在当今数字时代，Chrome 扩展程序已经成为提高工作效率和个性化浏览体验必不可少的工具。随着 Manifest V3 的推出，开发人员可以利用更现代且功能更强大的 API 来构建扩展程序。本文将提供一个详细的分步指南，指导您使用 React 和 Manifest V3 构建 Chrome 扩展程序。

先决条件

在开始之前，确保您拥有以下软件：

Node.js（版本 14 或更高）
npm（版本 6 或更高）
Visual Studio Code 或您偏爱的代码编辑器
Chrome 浏览器（版本 100 或更高）

创建新扩展程序

初始化扩展程序
打开您的终端或命令提示符，运行以下命令：

npx create-react-extension

系统会提示您输入扩展程序的名称。输入一个独特且有意义的名称。

安装依赖项
导航到新创建的扩展程序目录并安装依赖项：

cd my-extension && npm install

添加 React 组件

创建 React 组件
在 src 目录中，创建两个文件：App.js 和 index.css。
添加 React 逻辑
在 App.js 中，添加以下代码：

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Chrome 扩展程序使用 React</h1>
      <p>点击次数：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击</button>
    </div>
  );
}

export default App;

添加样式
在 index.css 中，添加一些样式：

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #000;
}

p {
  color: #666;
}

button {
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
}

配置 Manifest V3

在 manifest.json 文件中，将内容替换为：

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "description": "A Chrome extension built with React and Manifest V3",
  "version": "1.0.0",

  "action": {
    "default_popup": "index.html"
  },

  "permissions": [],

  "host_permissions": [],

  "background": {
    "service_worker": "background.js"
  }
}