如何使用 Chrome 扩展程序更改网页用户界面

你是否曾好奇 Chrome 扩展程序是如何改变你喜爱的网站（例如 YouTube 和 GitHub）的界面的？Chrome 扩展程序可以成为提升效率、帮助你调试代码的强大工具，有时还能带来纯粹的乐趣。希望读完这篇博文后，你能了解其中的奥秘，以及如何使用内容脚本通过 Chrome 扩展程序打造属于你自己的界面魔法。我将带你了解我们如何使用OpenSauced.ai Chrome 扩展程序来实现这一点。如果你想深入了解这款扩展程序，文末附有代码仓库的链接。

OpenSauced.ai Chrome 扩展程序是一款功能强大的工具，可以帮助开源维护者和贡献者提高工作效率。它利用人工智能工具，并与 OpenSauced 平台无缝集成，从而增强开源项目的可发现性。

此扩展程序修改了 GitHub 网页，并添加了有助于代码审查的实用元素，实现了与 GitHub 上的 OpenSauced 的直接交互，并提供了生成测试和解释代码等附加功能。

GIF

但这究竟是如何实现的呢？Chrome 扩展程序如何才能将 UI 元素插入网页呢？🤔

支配：释放内容脚本的力量

内容脚本在此发挥着至关重要的作用。内容脚本是 Chrome 扩展程序提供的一项功能，它允许扩展程序操作和修改网页的 DOM（文档对象模型）。内容脚本充当扩展程序和网页之间的桥梁，实现了 UI 元素的无缝注入。通过利用内容脚本，OpenSauced.ai Chrome 扩展程序得以添加其实用功能，并提升 GitHub 上的用户体验。

为 Chrome 扩展程序创建内容脚本

您可以创建内容脚本，这是一个标准的 JavaScript/TypeScript 文件，位于 src/ 文件夹中，用于您的 Chrome 扩展程序。我们稍后会讨论如何在根目录的 manifest.json 中注册它。

内容脚本可以读取浏览器访问的网页详情，对其进行修改，并将信息传递给其父扩展程序。因此，我们可以读取当前 URL，并根据用户所在的页面执行各种操作！

在 OpenSauced.ai Chrome 扩展程序中，我们利用这些信息来决定需要将哪些元素注入到页面中。例如，如果当前页面是个人资料页面，则应注入“在 OpenSauced 上查看”按钮；而各种 PR 审核功能则仅在当前页面是代码审核页面时才应注入。

所有的条件语句和代码注入都应该放在这个内容脚本中。以下是来自 OpenSauced.ai Chrome 扩展程序的示例代码片段：

if (isGithubProfilePage(window.location.href)) {
        const username = getGithubUsername(window.location.href);

        if (!username) {
            return;
        }
        if (await isOpenSaucedUser(username)) {
            injectViewOnOpenSauced(username);
        }
}

这段代码会检查当前页面是否为 GitHub 个人资料页面，例如github.com/diivi，如果该用户也存在于 OpenSauced 上，则会渲染“在 OpenSauced 上查看”按钮，很简单！

将自定义 UI 组件注入到网页中💉

将组件注入 DOM 非常简单，只需通过 JavaScript函数创建一个节点createElement，然后使用任何你喜欢的方法将其添加到 DOM 即可——我们使用 ` appendChildadd_components` 方法，但还有insertBefore其他类似的方法。以下是 OpenSauced.ai Chrome 扩展程序的使用示例：

const injectViewOnOpenSaucedButton = (username: string) => {
    if (document.getElementById("view-on-opensauced-button")) {
        return;
    }

本节处理重复节点：我们为节点添加一个 id，如果 DOM 中已经存在具有该 id 的节点（由于重新渲染或其他技术问题），我们不会再次将该节点添加到 DOM 中。

    const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);

ViewOnOpenSaucedButton 是一个组件（Node），它包含了“在 OpenSauced 按钮上查看”所需的所有 HTML、CSS 和 JS 代码。在这里，我们将视图与逻辑分离了。

    const userBio = document.querySelector(
        `${GITHUB_PROFILE_USER_PROFILE_BIO_SELECTOR}, ${GITHUB_PROFILE_EDIT_MENU_SELECTOR}`,
    );

    userBio?.append(viewOnOpenSaucedButton);
};

由于我们可以访问网页的 DOM，我们可以找到要将 Node 注入到的组件，并使用该append方法实际注入它。

注册脚本📜

manifest.json内容脚本在文件中的“content_scripts”字段下注册，如下所示：

{
 "name": "OpenSauced.ai",
 ...
 "content_scripts": [
   {
      "js": ["src/content-scripts/github.ts"],
      "matches": ["https://github.com/*"],
       ...
   }
 ],
 ...
}

这是 OpenSauced.ai Chrome 扩展程序manifest.json文件中的一段代码。其中，` jskey` 参数需要一个数组，数组中包含要执行的内容脚本所在的路径；而 ` matcheskey` 参数需要一个数组，数组中包含要注入此内容脚本的网页的 URL。

现在运行扩展程序，瞧！🎉

按钮已成功安装到我想要的位置！

创建自己的 Chrome 扩展程序有很多可能性。您可以在我们的open-sauced/ai 代码库中找到我们 Chrome 扩展程序的完整代码。正如您在本博文顶部的 GIF 动画中所看到的，我们的扩展程序具备代码重构、编写测试和代码讲解等功能。您还可以与OpenSauced 的精彩内容互动等等。Chrome 扩展程序的功能远不止这些，例如在您的 PR 中添加 GIF 动画，或者与在线帖子进行互动。您在 Chrome 扩展程序中见过的最有趣的功能是什么？