如何构建我的AI驱动的Chrome扩展程序？

介绍

大家好！在这篇文章中，我很兴奋地分享我使用ChatGPT创建AI驱动的Chrome浏览器插件的旅程。这个想法在我驾车路上突然袭击了我。我想，“如果AI能处理和增强网页上选中的任何文本呢？这样，我们就可以在不离开当前浏览的页面的情况下获得有价值的见解。”虽然以前从未创建过Chrome插件，但我踏上了这个冒险之旅，将我的想法变为现实。出乎意料的是，这个过程比我预期的要简单，学习的经验也非常有意义。

我使用的工具

一旦我对我的扩展的外观和工作原理有了一些想法，我开始了解Chrome扩展，因为我以前从未建立过扩展。在下面，您将看到我在项目中使用的所有工具和资源：

1. 谷歌 Chrome API 文档 2. Open AI API 文档 3. YouTube 4. ChatGPT :)

首先，我开始学习 Chrome 扩展的基础知识。我查阅了谷歌官方文档和他们的示例GitHub存储库，了解代码的组织方式和代码本身。

然后，我根据Open AI的文档将ChatGPT API集成到我的JavaScript代码中。说实话，这比我想象的要简单和直接。只需使用fetch进行一个简单的API调用，就足以将ChatGPT集成到我的扩展程序中。

最后但并非最不重要的是，我决定将我的扩展发布到Chrome网络商店。我将在本文的结尾提供链接。任何人都可以使用他们的Open API密钥来使用这个扩展。点击“设置”按钮后可以设置API密钥。

它的工作原理

一旦扩展程序安装完成，任何选定的文本块都可以进行摘要、加点和详细说明。用户只需右键点击并选择他们想要执行的操作。选项包括“摘要”、“重点”和“详细说明”。以下是每个功能的详细说明：

概述：将会生成所选文本的摘要。
关键要点：将生成突出显示所选文本的项目符号。
详细说明：将从所选文本中生成更长、更详细、更具描述性的上下文。

当你在网页上进行选择时，菜单的外观如下：

AI Actions are accessible through the right-click context menu

一旦文字由ChatGPT生成，它将显示在侧面板上，方便用户阅读。

Results will be shown on the Chrome’s Side Panel

挑战

这个项目最具挑战性的部分是理解Chrome扩展是如何架构以及某些部分是如何工作的。此外，最近Chrome已经切换到Manifest版本V3，这在我研究这个主题时也让我感到困惑。经过数小时的研究，我成功掌握了基本原理并将其应用到我的项目中。我还遇到了Chrome如何对某些JS环境进行沙盒化的问题。例如，如果你需要调用外部API，你必须在运行在沙盒化环境中的服务工作者中执行操作。这种分离不允许你在想要操作一些HTML元素的时候访问网页DOM。当然，有一些方法可以解决这个问题，但值得注意的是。

接下来呢？

当我展望未来时，我对扩展功能的可能性感到兴奋。我目前正在探索一些想法，我相信这些想法将提升用户体验。

翻译功能：我正在考虑的一个新增功能是翻译工具。想象一下，只需点击一下，就能轻松将任选文字翻译成您偏好的语言。对于经常阅读外语内容的用户来说，这个功能将非常有用。
交互式聊天功能：另一个功能是交互式聊天选项，用户可以与AI进行对话，并讨论生成的摘要。这不仅能提供更具动态和类似GPT的体验，还可以让用户更深入地探讨主题、提出后续问题，并获得更全面的上下文理解。