通过构建 Chrome 扩展程序练习 React/TypeScript

Chrome 无疑是最易用的浏览器之一。它的调试工具非常出色，而且你还可以通过扩展程序添加许多其他功能。其他开发者编写和维护的这些小程序确实能极大地提升你的工作效率。不过，你也可能找不到一款完全符合你需求的扩展程序。

好消息是，您可以自己制作一个！您甚至不需要学习任何特殊知识。如果您知道如何编写 TypeScript，就可以制作自己的 Chrome 扩展程序。您将在本简短教程中学习如何操作。我们将介绍一些背景知识、构建扩展程序以及如何在 Chrome 中使用它。

为什么要创建自定义扩展

在测试代​​码时，您可能想过如何简化测试，或者在浏览器中实现自动化测试。自定义扩展程序可以帮您实现这些。开发扩展程序更多的是为了解决您遇到的具体问题。您所在的公司可以实施一套测试流程，您可以为此编写一个快速扩展程序，并将其提供给整个团队。

或者，你可以编写一些扩展，只是为了以一种有意义的方式练习你的 TypeScript 技能。重要的是不要被“制作最佳”扩展或最流行的扩展的炒作所迷惑。你的自定义代码是为你和你试图解决的问题而写的。把它想象成创建你自己的小捷径。

编写扩展代码

从代码层面来看，Chrome 扩展程序仅包含 HTML、CSS 和 JavaScript，您可以使用 Chrome 提供的 API 为浏览器添加功能。我们将使用 React 编写演示扩展程序。我们开发的扩展程序不会实现任何惊艳的功能，但它会向您展示如何开始开发扩展程序的基础知识。

我们要做的第一件事是使用 create-react-app 创建一个新的 React 项目。如果你还没有 create-react-app，请先使用以下命令将其安装到你的目录中。

npm install create-react-app

现在您已经有了一个全新的应用，让我们编辑其中一个文件，使其成为 Chrome 扩展程序。进入 public 文件夹，找到 manifest.json 文件。它里面已经包含了一些代码，但我们将按照以下方式进行修改。

{
    "manifest_version": 2,
    "short_name": "The Ultimate Help Tool",
    "name": "The Ultimate Help Tool",
    "description": "When you get stuck on a coding problem and you aren't sure what to do next, push this button",
    "version": "0.1",
    "browser_action": {
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab"
    ],
    "content_security_policy": "script-src 'self' 'sha256-5As******'; object-src 'self'",
    "author": "Milecia McG"
}

需要注意的是，您的 manifest_version 应始终为 2，因为 Google 已明确指出https://developer.chrome.com/extensions/manifestVersion。此外，content_security_policy 也必须进行类似设置，以便您能够在本地使用扩展程序。我们使用 browser_action 属性来显示右上角的小图标，并在您点击它时显示扩展程序的主体部分。permissions 值设置为 activeTab，以便我们可以在当前选项卡中执行 browser_action。接下来，我们将编写 App.js 文件的代码。它会非常简单，只包含一个链接和标题。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Save Me Now</h1>
                <a href="https://stackoverflow.com/" id="checkPage" target="_blank" rel="noopener noreferrer">Check this page now!</a>
            </div>
        );
    }
}

export default App;

现在您已经完成了这个小演示代码，请继续使用此命令进行构建。

npm run build

在 Chrome 中使用它

制作一个扩展程序应该不难吧？现在你可以在 Chrome 中测试一下。打开浏览器，在新标签页中输入以下代码。

chrome://extensions

在右上角，你会看到“开发者模式”选项。请打开它。你应该会看到这个。

点击“加载解压后的文件”即可上传您的构建文件夹。现在您将看到您的自定义扩展程序！它还会以拼图碎片的形式显示在 Chrome 浏览器的右上角。

送给别人

测试完这个闪亮的新扩展程序后，您可以轻松地与他人分享。如果您不想被 Chrome 网上应用店打扰，您可以创建一个 GitHub 代码库，供其他人克隆。不过，如果您不想让其他人访问源代码，将扩展程序上传到网上应用店也是一个不错的选择。上传过程可能需要一些时间，但他们有一些关于如何完成发布流程的优秀文档，网址为 https://developer.chrome.com/webstore/publish。

制作 Chrome 扩展程序是练习 JavaScript 和深入了解框架的另一种方式。或者，您也可以编写一些简单的 JavaScript、HTML 和 CSS。此外，您还可以制作一些大家都喜欢的实用功能。您曾经制作或发布过扩展程序吗？或者，您是否为其他浏览器制作过类似扩展程序的东西？我知道 Firefox 有自己的附加组件，但我还没有制作过。

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding