React Chrome 扩展程序在 React 中创建 Chrome 扩展程序

扩展的功能

扩展基础

从头开始

未完待续

几周前我刚开始用 Edge 浏览器，发现它没有内置强密码生成器。于是决定自己写一个。

市场上的大多数扩展程序都是多年前开发的，而且都是用原始的 HTML、CSS 和 JavaScript 编写的。但现在我们有了 React 和 UI 组件库，生活应该会轻松很多。

我很快发现的问题是，几乎没有任何地方提供 React 扩展的教程。所以我决定在这里分享所有内容。

• 源代码来自我的副项目10converters.com。
• Github 上的 Repo强密码生成器。
• Edge 扩展插件商店：强密码生成器。

欢迎在 Github 上为 repo 加星标或在 Edge Addons Store 上留下评论！

扩展的功能

它会生成一个包含小写字母、大写字母、数字和符号的 15 个字符长的密码。

但它不像 Chrome 内置密码管理器那样，它没有：

• 自动复制到剪贴板
• 在网页中填写密码/确认字段
• 在某个地方管理/备份你的密码，不要在云端，甚至不要在本地进行

它的作用是：

• 保持一切在客户端运行，这意味着根本没有服务器
• 手动复制到剪贴板

我尽量把它简化到一天就能搞定。任何按照本教程操作的人都可以在一天内将自己的扩展程序提交到 Chrome 网上应用店或 Microsoft Edge 扩展程序插件（名字好长啊）（但根据我的经验，微软需要 2-3 天才能批准你的提交）。

扩展基础

在深入细节之前，我想稍微解释一下基于 Chromium 的浏览器扩展的基本结构。

此扩展结构适用于 Chrome、Edge 和 Brave，也许还适用于我不知道的其他基于 Chromium 的浏览器。

扩展有几个关键部分：

显现

manifest 描述了源包中的内容。它指定了浏览器可以在哪里找到背景、内容脚本、弹出窗口和选项页面。此外，它还描述了扩展所需的权限。

背景

扩展程序启动时启动的一段代码，直到扩展程序被删除或浏览器关闭才会终止。

后台代码可以访问所有 Chrome API，其他部分受限。但后台没有 UI，也无法访问 DOM。

弹出窗口

当用户点击“浏览器操作”时弹出的用户界面，即浏览器地址栏右侧的扩展图标按钮。

大多数扩展都需要弹出窗口作为入口。

选项

这是扩展程序的可选部分。并非所有扩展程序都包含选项页面。它用作扩展程序的配置 UI。您的扩展程序必须为其提供一个入口。

如果您有一些复杂的东西需要配置，那么您就需要这个。

内容脚本

内容脚本是一段在特定标签页中运行的 JavaScript 代码。URL 的模式定义在 manifest.json 中。如果 manifest.json 中指定的 URL 与该模式匹配，浏览器就会启动内容脚本。当 URL 发生变化或标签页关闭时，内容脚本会被终止。

如果您想操作 DOM，您需要内容脚本。

所以您应该已经知道这些部分现在在做什么。

强密码生成器扩展涉及哪些部分

背景，不在本教程中，但在 repo 中有一个空的 background.js，仅供将来使用。

弹出窗口，没错。这就是本文的重点。我将向您展示如何在 React + Material 中编写一个弹出窗口。

選擇，沒有。

内容脚本，没有。

从头开始

以下是从头开始在 React 中创建扩展的 5 个步骤。

步骤 1：创建一个 React 应用

$npx create-react-app extension

这将创建一个常规的 React 应用。其他所有内容都基于这个种子应用进行开发。

第二步：修改public/manifest.json

在 CRA(create-react-app) 之后，你已经有一个 public/manifest.json 文件。请按如下方式修改该文件：

{
    "name": "Strong Password Generator",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Strong password generator",
    "icons": {
        "512": "logo512.png"
    },
    "browser_action": {
        "default_icon": "logo512.png",
        "default_popup": "popup.html"
    }
}

步骤3：创建构建脚本（script/build.sh）

#!/bin/bash

build() {
    echo 'building react'

    rm -rf dist/*

    export INLINE_RUNTIME_CHUNK=false
    export GENERATE_SOURCEMAP=false

    react-scripts build

    mkdir -p dist
    cp -r build/* dist

    mv dist/index.html dist/popup.html
}

build

此脚本做了两件事：

• 使用一些特定的环境变量设置来构建 React 应用程序
• 将 index.html 重命名为 popup.html

INLINE_RUNTIME_CHUNK=false 禁用 webpack 在 HTML 中生成内联 JavaScript。通常，webpack 会将其自身的运行时放入 HTML 内联脚本中。但浏览器扩展不允许内联脚本。

将 index.html 重命名为 popup.html，因为 manifest.json 中要求它是 popup.html。

创建脚本/build.sh后，不要忘记添加x权限：

chmod +x script/build.sh

步骤4：修改package.json

修改脚本如下：

"scripts": {
    "start": "react-scripts start",
    "build": "./script/build.sh",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

步骤 5：构建并加载到 Chrome（或 Edge）

$npm run build

然后你会得到一个“dist”目录。在 Chrome 或 Edge 中将其作为解压后的扩展程序加载。你会看到：

React 扩展正在运行。

未完待续

仍然存在需要进行重大扩展的悬而未决的问题，例如：

• 如何处理选项页面？它不是弹出页面，而是另一个页面，但 CRA 创建了一个 SPA。
• 在 React 中编写扩展是否存在性能问题？
• 我的内容脚本将向主机页面注入一些 UI 组件，React 可以应用于这种场景吗？

也许还有一些其他主题与 React 关系不大，但对于严肃的扩展来说仍然很重要：

• 如何混淆源代码，尤其是 background.js
• 我将在我的扩展中引入 Firebase，有什么建议吗？

如果有人对以上问题感兴趣，我们将在下一篇文章中讨论。如果您有任何其他问题、建议或反馈，欢迎在下方留言。