成为超级英雄：如何用AI打造你的Hulk Chrome扩展

然我
311 阅读3分钟

想象一下，你不再只是一个普通的开发者，而是一个拥有超能力的AI应用开发工程师。今天，我们要一起踏上一段奇妙的旅程，利用最新的AI技术，尤其是大型语言模型（LLM）的力量，来创建一个能让你在浏览网页时瞬间变身“绿巨人”的Chrome扩展——我们称之为“Hulk”！

智能生产力的新纪元

在这个充满无限可能的世界里，OpenAI、Claude sonnet和deepseek等工具不再是简单的代码生成器，它们是你手中的神器，帮助你在开发道路上所向披靡。这些强大的AI助手能够理解自然语言指令，为你提供精准的代码建议，让编程变得像与朋友聊天一样简单有趣。

Prompt Engineering：给AI一个身份，让它成为你的超级伙伴

为了让我们的AI助手更好地理解任务，我们需要赋予它一个身份。比如，在开发Hulk扩展时，我们可以告诉AI：“你是一个经验丰富的Chrome扩展开发者，擅长创造让用户界面焕然一新的工具。”这样，当你要求它帮你实现某个功能时，它就能以最专业的方式给出解决方案。

AIGC：从概念到现实的魔法

现在，让我们把注意力转向实际操作。开发一个Chrome插件听起来可能有些吓人，但有了AI的帮助，这个过程就像是在玩一场游戏。通过简单的提示，AI可以快速生成初稿，而你需要做的只是微调，就像给画作添加最后的润色一样。

动手实践：构建Hulk Chrome扩展

接下来是最重要的部分——构建我们的Hulk扩展！根据预先设计好的UX图（请参考ux.png），我们将一步步实现以下交互：

Step 1: 点击程序图标打开弹出窗口，在窗口中显示默认提示：
“改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” 和一个
“改变背景颜色”按钮
Step 2: 点击按钮，网页背景改变为绿色。 别忘了使用icons文件夹里的图标作为应用程序图标哦，这会让你的扩展看起来更加酷炫！

接下来AI会根据指令生成相应的代码

{
    "manifest_version": 3,
    "name": "Hulk",
    "version": "1.0",
    "description": "改变网页背景颜色的Chrome扩展",
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "permissions": ["activeTab"],
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }]
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hulk</title>
</head>
<body>
    <p>改变背景颜色</p>
    <p>点击下方按钮将当前页面背景颜色为绿色</p>
    <button id="changeColorButton">改变背景颜色</button>
    <script src="popup.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', function() {
    const changeColorButton = document.getElementById('changeColorButton');
    changeColorButton.addEventListener('click', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            if (tabs[0].id) {
                chrome.tabs.sendMessage(tabs[0].id, {action: "changeBackgroundColor"}, 
                    () => chrome.runtime.lastError); // 处理连接错误
            }
        });
    });
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === "changeBackgroundColor") {
        document.body.style.backgroundColor = "green";
    }
});

开发完成后，我们可以在Chrome浏览器中加载未打包的扩展程序：打开 chrome://extensions/ ，启用“开发者模式”，点击“加载已解压的扩展程序”，选择 d:/lesson_si/aigc/hulk 文件夹

接下来就是见证奇迹的时刻 image.png

image.png

结语

通过这次冒险，我们不仅学习了如何使用AI技术简化开发流程，还亲手打造了一个实用又有趣的Chrome扩展。记住，作为一名AI应用开发工程师，你的创造力是没有边界的。继续探索，不断挑战自我，也许下一个伟大的发明就来自你的奇思妙想！

avatar
文章
阅读
粉丝