使用Google Gemini API密钥创建AI驱动的Chrome扩展程序

在这个快节奏的数字时代，我们高度依赖Chrome扩展程序来提升浏览效率

但你是否想过用人工智能为你的扩展注入超能力？听起来很酷对吧？😎随着谷歌Gemini API的发布，AI技术变得触手可及。该API能让你在项目中直接调用先进的自然语言处理、图像识别等炫酷的AI功能。更棒的是——你可以将这些能力嵌入到Chrome扩展中！本文将手把手教你如何使用Google Gemini API密钥开发AI驱动的浏览器扩展。现在，让我们开始吧！

为什么要开发AI驱动的Chrome扩展？🚀✨

Chrome扩展本是简单的工具，却能实现诸多功能——从标签页管理到自动化重复任务。但如果你的扩展还能：

像私人助理般实时解答问题 🗣️
快速生成网页摘要助力高效阅读 📄
将任意网站内容翻译成目标语言 🌐
通过情境化AI建议升级搜索体验 🔍

这一切是否更令人心动？谷歌Gemini API正是为此而生，它能让你的扩展具备类人交互能力，智能理解并响应用户需求。最妙的是？它的配置过程比你想象的更简单！

开发前的必备工具 🛠️

在开始编码之前，我们需要准备好以下工具：

Google Gemini API密钥
- 首先需要获取Google Gemini API的访问权限，https://aistudio.google.com/申请
Chrome扩展开发环境
- 如果你是Chrome扩展开发新手，别担心！只需准备：
  - HTML、CSS和JavaScript基础知识 🖥️
  - 已安装Chrome浏览器
  - 代码编辑器（如VS Code）✍️
Google Cloud项目
- 在Google Cloud控制台创建项目，用于关联Gemini API密钥
API认证配置
- 需要创建凭证来安全访问API，请按照指南生成API密钥

创建Chrome扩展的步骤指南 🏗️

步骤1：搭建Chrome扩展框架 🎨

创建扩展目录结构

my-ai-extension/

├── manifest.json # 核心配置文件

├── background.js # 后台服务脚本

├── popup.html # 弹出窗口页面

├── popup.js # 弹出窗口逻辑

└── styles.css # 样式表配置

manifest.json

{
    "manifest_version": 3,
    "name": "AI Powered Extension",
    "description": "An extension powered by Google Gemini API to enhance browsing.",
    "version": "1.0",
    "permissions": [
        "activeTab",
        "storage"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "host_permissions": [
        "https://*/*"
    ]
}

步骤2：创建弹窗界面 🖼️

当用户在Chrome中点击你的扩展程序图标时，弹窗就是他们看到的界面。让我们构建一个简单的界面，用户可以输入文本供AI处理。

popup.html：该文件包含一个文本输入框和一个触发AI功能的按钮。



    AI Chrome Extension

    Ask AI Anything!

styles.css：通过一些简单的样式让它看起来更美观。

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

input {
    width: 80%;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#response {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
}

步骤3：连接Google Gemini API 🔌

在popup.js中，我们将处理扩展程序与Gemini API之间的交互。

document.getElementById('askButton').addEventListener('click', async () => {
    const userQuery = document.getElementById('userQuery').value;
    const responseContainer = document.getElementById('response');

    if (userQuery) {
        const response = await getAIResponse(userQuery);
        responseContainer.textContent = AI Response: ${response};
    } else {
        responseContainer.textContent = "Please enter a question!";
    }
});

async function getAIResponse(query) {
    const apiKey = 'YOUR_GOOGLE_GEMINI_API_KEY';  // 替换为你的API密钥
    const url = https://gemini.googleapis.com/v1alpha:query?query=${query};

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${apiKey}
        },
        body: JSON.stringify({ query })
    });

    const data = await response.json();
    return data.answer || "Sorry, I couldn't process that.";
}

代码说明：使用 fetch() 向Google Gemini API发送查询请求获取响应后，在弹出窗口中显示AI生成的答案

步骤4：后台逻辑（可选） 🧠

你可以通过background.js实现额外的后台任务（例如数据获取或用户交互追踪），但目前这一步可以保持简洁。

chrome.runtime.onInstalled.addListener(() => {
    console.log("AI-powered Chrome extension installed!");
});

步骤5：测试与调试

打开Chrome浏览器，访问 chrome://extensions/
启用开发者模式并点击 "加载已解压的扩展程序"
选择包含你扩展程序文件的文件夹
点击扩展图标进行测试：输入查询内容并查看返回的响应

步骤6：发布你的扩展程序 🚀🌐

当你对扩展程序的功能满意后，就可以将其发布到 Chrome 应用商店了。只需按照 Chrome 应用商店开发者文档的指引打包并提交你的扩展程序即可。https://developer.chrome.com/docs/webstore/publish/

结语：未来属于AI驱动的浏览器扩展！🤖🌟

借助Google Gemini API，将尖端AI能力集成到Chrome扩展从未如此简单。只需几个步骤，你就能打造一个能即时回答问题、总结网页、翻译内容的全能扩展——一切触手可及！💡

这仅仅是开始！通过Gemini的AI赋能，扩展的可能性无穷无尽。无论是开发自动化工具、增强浏览体验，还是提升工作效率，AI驱动扩展的未来都充满光明前景🌟！接下来呢？发挥创意，立即开始构建属于你的AI动力Chrome扩展吧！🔧💻✨

本文同步自知识星球《AI Disruption》我是Substack和Medium顶级编辑。还是独立开发。星球里面分享AI趋势和国外数字营销。星球非免费。定价99元/年，0.27元/天。一是运行有成本，我希望它能自我闭环，这样才能长期稳定运转；二是对人的挑选，鱼龙混杂不是我想要的，希望找到关注和热爱 AI 的人。欢迎你的加入！

原文转载自：https://mp.weixin.qq.com/s/76AmMdJWuRIO3ujZcu3nEA