代码小白 30 分钟构建一个 Chrome 扩展——“悬浮页面摘要器”

尝试了一下 Gemini 的代码生成能力，此前毫无任何代码开发能力，通过半小时的沟通完成了一个非常简单的 AI 辅助内容总结工具。

扩展简介：悬浮页面摘要器 (Hover Page Summarizer)

悬浮页面摘要器是一款强大的浏览器增强工具，旨在彻底改变您的网页浏览和信息获取方式。当您将鼠标悬停在任何超链接上时，它会自动弹出一个“摘要”按钮。点击后，它会利用强大的人工智能（ Google Gemini ）在后台静默浏览目标页面，并为您生成一段简洁、精准、中立的中文摘要。

✨ 核心功能

• 即时 AI 摘要：无需离开当前页面，即可快速了解链接背后网页的核心内容，极大地节省您的时间和精力。
• 悬浮窗口：摘要结果会以一个独立的、可拖拽的“液态玻璃”质感窗口呈现。您可以将它移动到屏幕的任何位置，方便您对照原文进行阅读。
• 实时主题切换：通过点击浏览器右上角的扩展图标，您可以随时在清爽的“浅色玻璃”和酷炫的“深色玻璃”主题之间切换，以适应不同的光线环境和个人偏好。
• 一键复制：每个摘要窗口都配有“复制”按钮，方便您将摘要内容快速保存到剪贴板。

这款工具是快速筛选信息、进行学术研究和日常浏览的理想助手。

如何获取免费的 Google Gemini API 密钥

为了驱动本扩展的 AI 摘要功能，您需要一个自己的 Google Gemini API 密钥。获取过程非常简单，并且在一定的使用额度内是免费的。

操作步骤

1. 访问 Google AI Studio

   • 打开浏览器，访问 Google AI Studio 官方网站： https://aistudio.google.com/

2. 登录您的 Google 账户

   • 网站会要求您使用您的 Google 账户登录。

3. 创建 API 密钥

   • 登录后，点击页面左上角的 “Get API key” （获取 API 密钥）按钮。
   • 在弹出的菜单中，选择 “Create API key in new project” （在新项目中创建 API 密钥）。

4. 复制并保存您的密钥

   • 系统会自动为您生成一长串由字母和数字组成的密钥。这就是您的 API 密钥。
   • 点击它旁边的复制按钮，将它立即保存在一个安全的地方（例如记事本或密码管理器中）。注意：这个密钥只会完整显示一次，请务必妥善保管。

5. 在扩展中配置密钥

   • 回到您的 Chrome 浏览器，右键点击本扩展的图标，选择 “选项”。
   • 将您刚刚复制的 API 密钥粘贴到输入框中，然后点击 “保存”。

完成以上步骤后，您的扩展就配置完毕，可以开始正常使用了！

下载链接🚀 https://drive.google.com/file/d/1QNdpko6COMlklfKGNHleAhF6YoXp0_49/view?usp=drive_link