📌  相关文章
📜  npx：创建 react chrome 扩展 - Javascript (1)

📅  最后修改于: 2023-12-03 15:03:18.177000             🧑  作者: Mango

以npx：创建 React Chrome 扩展

简介

Chrome 扩展（Chrome Extensions）是一种通过内置 API 扩展 Chrome 浏览器功能的开发方式。React 是目前最受欢迎的前端框架，它能使开发者更加高效地构建用户界面。本文将介绍如何使用 npx、React 和 Chrome 扩展 API 创建一个简单的 React Chrome 扩展。

准备工作

在开始之前，请确保你已经安装了Node.js 和 Google Chrome 浏览器。

创建 React 应用

使用 create-react-app 工具创建一个新的 React 应用。

npx create-react-app my-extension --template cra-template-pwa
cd my-extension
安装所需依赖

使用以下命令安装我们需要的依赖

npm install --save react react-dom react-scripts react-chrome-extension

react-scripts 是为了在开发/构建环境下启用 TypeScript，地图，Redux等。 react-chrome-extension 是一个库，它封装了一些常见的开发需求，并在开发中处理了与 Chrome API 的通信。

编写代码

创建一个新的目录public和src，并添加以下文件：

  • public/manifect.json: Chrome 扩展的配置文件
  • public/index.html: 扩展的入口文件
  • src/content.js: 扩展的主要逻辑，它将在页面加载时注入到页面上
配置文件

在 public 目录下创建一个名为 manifest.json 的文件，并添加以下代码：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A simple Chrome extension",
  "permissions": ["tabs", "activeTab"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  }
}

其中：

  • manifest_version：设置为 2，它表示我们正在使用最新版本的 manifest 文件。
  • name：扩展名，这将在 Chrome 扩展管理器中显示。
  • version：扩展程序版本。
  • description：扩展程序说明。
  • permissions：扩展需要访问的权限。在这种情况下，我们需要访问 tabs 和 activeTab 权限。
  • browser_action：扩展程序操作，图标和默认弹出浏览器中的 HTML 页面。
入口文件

在 public 目录中创建一个名为 index.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Extension</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

此文件将充当我们扩展的入口文件，它将呈现我们的 React 应用。

扩展逻辑

在 src 目录下创建一个名为 content.js 的文件，并添加以下代码：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const appDiv = document.createElement("div");
appDiv.id = "my-extension-root";
document.body.appendChild(appDiv);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  appDiv
);

此文件将负责主要的扩展逻辑。它将在页面加载时注入一个 div 标记到页面上，并将我们的 React 应用渲染到这个标记中。

App

在 src 目录下创建一个名为 App.js 的文件，并添加以下代码：

import React from "react";

function App() {
  return <h1>Hello World!</h1>;
}

export default App;

此文件包含我们的 React 应用代码。在这里，我们只是简单地返回一个“Hello World!”消息。

构建扩展

为了构建扩展，我们需要运行以下命令：

npm run build

这将使用 React 应用程序源代码中的公共文件夹内容生成扩展所需的所有文件和目录。

在 build 目录中出现 .map/.js/.ico/.html/.json 文件等等，可以将他们一起打包上传到 chrome 应用商店。

演示

让我们测试一下刚刚构建的扩展。将chrome://extensions/加载到 Chrome 中，然后单击“加载解压缩的扩展程序”按钮并选择构建文件夹。这将启用我们的扩展程序。

要查看扩展程序，请单击 Chrome 工具栏中的图标。你应该能够看到 "Hello World!"。

结论

在本教程中，我们学习了如何使用 npx、React 和 Chrome API 创建一个简单的 Chrome 扩展。通过使用 React 简化了我们的代码。我们还介绍了如何使用 npm run build 命令构建扩展。强烈建议继续学习 Chrome 扩展 API，学习不断进步！