从零开发一个 Chrome 扩展：让网页瞬间变绿 🌿从零开发一个 Chrome 扩展：让网页瞬间变绿 🌿 —— 用

从零开发一个 Chrome 扩展：让网页瞬间变绿 🌿

—— 用 AI 和代码实现你的第一个浏览器插件

大家好，今天我要分享一个超酷的 Chrome 扩展开发经历！🎉 这个扩展名叫 Hulk，它的功能非常简单粗暴：点击按钮，网页背景瞬间变绿！💚 是不是很神奇？让我们一起来看看这个扩展是如何诞生的吧！

1. 需求分析 🧐

首先，我们来看一下需求文档（instruction.txt）：

功能描述：点击扩展图标，弹出窗口显示提示信息和按钮，点击按钮后网页背景变为绿色。
设计参考：UX 设计图（UX.jpg）。
图标使用：使用 icons 文件夹中的图标。

简单明了，对吧？接下来，我们就按照这个需求一步步实现。

2. 文件结构 📂

在开始之前，我们先来看一下这个扩展的文件结构：

hulk/
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   ├── icon128.png
└── UX.jpg

每个文件都有其特定的作用，接下来我们逐一解析。

3. `manifest.json`：扩展的身份证 🆔

manifest.json 是 Chrome 扩展的核心配置文件，它定义了扩展的基本信息和功能。我们的 manifest.json 文件如下：

{
    "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"]
}

这里我们定义了扩展的名称、版本、描述，以及弹出窗口和图标的位置。permissions 字段指定了扩展需要的权限，这里我们只需要 activeTab 权限来操作当前标签页。

4. `popup.html`：弹出窗口的界面 🖼️

popup.html 是点击扩展图标后弹出的窗口页面，它包含了提示信息和按钮。代码如下：

<!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>

这个页面非常简单，只有两行提示和一个按钮。点击按钮后，网页背景就会变成绿色。

5. `popup.js`：按钮点击事件的处理 🖱️

popup.js 负责处理按钮的点击事件，并向当前活动标签页发送消息以改变背景颜色。代码如下：

document.addEventListener('DOMContentLoaded', function() {
    const changeColorButton = document.getElementById('changeColorButton');
    changeColorButton.addEventListener('click', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {action: "changeBackgroundColor", color: "green"});
        });
    });
});

这里我们监听了按钮的点击事件，并通过 chrome.tabs.sendMessage 向当前标签页发送消息，请求将背景颜色改为绿色。

6. `content.js`：改变网页背景颜色 🎨

content.js 在网页中运行，接收来自弹出窗口的消息并改变网页背景颜色。代码如下：

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

这段代码监听来自扩展的消息，如果消息的 action 是 changeBackgroundColor，就将网页的背景颜色改为指定的颜色。

7. 图标设计 🎨

扩展的图标存放在 icons 文件夹中，分别是 icon16.png、icon48.png 和 icon128.png。这些图标会在不同的场景下显示，比如扩展栏、扩展管理页面等。

8. 加载扩展 🚀

将上述文件按路径创建好后，你可以按照以下步骤在 Chrome 浏览器中加载扩展：

打开 Chrome 浏览器，访问 chrome://extensions/。
开启右上角的“开发者模式”。
点击“加载已解压的扩展程序”，选择 hulk 文件夹。

这样，你就可以使用名为 Hulk 的 Chrome 扩展程序了！

9. 总结 🎉

通过这个简单的 Chrome 扩展开发，我们学习了如何编写 manifest.json、popup.html、popup.js 和 content.js，并了解了 Chrome 扩展的基本工作原理。虽然这个扩展的功能非常简单，但它为我们打开了 Chrome 扩展开发的大门。🚪

如果你对 Chrome 扩展开发感兴趣，不妨从这个小项目开始，逐步探索更多有趣的功能！💡

希望这篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言！👇

Happy coding! 🚀✨

从零开发一个 Chrome 扩展：让网页瞬间变绿 🌿