菜鸟小白也会的超简单操控页面颜色的魔法

爱学习的茄子
232 阅读4分钟

🎯 前言

在AI驱动的开发时代，我们正在见证软件开发范式的重大转变。本项目展示了如何利用AI技术快速开发Chrome扩展，体现了现代AI辅助编程的核心理念：

  1. 🤖 AI驱动的开发流程

    • 利用LLM（Large Language Model）的强大能力
    • 通过自然语言描述实现功能需求
    • 快速原型开发和迭代

  2. 🎨 Prompt Engineering实践

    • 通过精确的任务描述引导AI生成代码
    • 将复杂需求分解为清晰的步骤
    • 利用AI进行代码优化和错误处理

  3. 🚀 现代开发范式

    • 告别传统的"从零开始"开发模式
    • 采用AI辅助的快速开发方法
    • 专注于业务逻辑和用户体验

本项目是一个简单的Chrome扩展示例，展示了如何将AI技术融入开发流程，实现高效、可靠的代码生成。通过这个项目，我们可以看到AI如何帮助开发者快速进入新的技术领域，并产出高质量的代码。

✨ 功能特点

  • 🎨 简洁的用户界面
  • 🖱️ 一键改变网页背景色
  • 🛡️ 符合Chrome扩展最新标准（Manifest V3）
  • 🐛 完善的错误处理机制

🛠️ 技术栈

  • 🌐 Chrome Extension API
  • 📜 JavaScript (ES6+)
  • 🎨 HTML5 & CSS3
  • 📦 Manifest V3

🎮 项目实践：创建chrome扩展小插件hulk

根据已经设计好的UX设计图，进行以下步骤交互：

  • 👆 Step 1：点击程序图标打开弹出窗口，在窗口中显示默认提示："改变背景颜色"、"点击下方按钮将当前页面背景色为浅蓝色"和一个"改变背景颜色"按钮
  • 🎨 Step 2：点击按钮，网页背景改变为浅蓝色

不要忘了用icons中的图片装饰我们的chrome扩展小插件哦

然后给AI发送根据以上文件，帮我写一个完全正确的chrome扩展插件，然后AI会生成相应的代码：

manifest.json

  "manifest_version": 3,
  "name": "Hulk",
  "version": "1.0",
  "description": "A Chrome extension that changes webpage background color to light blue",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

popup.html

<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h3>改变背景颜色</h3>
  <p>点击下方按钮将当前页面背景色为浅蓝色</p>
  <button id="changeColor">改变背景颜色</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    if (!tab) {
      console.error('No active tab found');
      return;
    }

    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        document.body.style.backgroundColor = '#ADD8E6'; // 浅蓝色
      }
    });
  } catch (error) {
    console.error('Error executing script:', error);
  }
});

接下来就是在Chrome浏览器中安装扩展：

  • 打开 chrome://extensions/
  • 开启右上角的"开发者模式"
  • 点击"加载已解压的扩展程序"
  • 选择包含这些文件的文件夹

最后点击"改变背景颜色"的按钮

image.png

这时你会发现魔法出现了，浅蓝色的页面也太爱了吧

image.png

📝 代码注释

代码不会怎么办？AI帮你一键解决！✨

image.png

🎉 项目总结

本项目展示了如何利用AI技术快速开发Chrome扩展，体现了现代AI辅助编程的核心理念。通过精确的Prompt Engineering，我们将简单的需求转化为完整的Chrome扩展应用。

项目核心功能是通过点击扩展图标，在弹出窗口中提供一键改变网页背景色的功能。技术实现上采用了最新的Chrome Extension Manifest V3规范，确保了扩展的安全性和性能。代码结构清晰，包含完善的错误处理机制，提供了良好的用户体验。

在开发过程中，我们充分利用了AI辅助编程的优势，从需求分析到代码生成，再到测试优化，整个过程高效且可靠。这不仅展示了AI在软件开发中的实际应用价值，也体现了现代开发范式的转变。

通过这个项目，我们验证了AI辅助开发在Chrome扩展开发领域的可行性，为开发者提供了一个实用的参考案例。项目虽然简单，但完整展示了AI驱动开发的工作流程，具有重要的实践意义。

avatar
文章
阅读
粉丝