传统手搓“紫了网页”超简单的Chrome扩展-Hulk变身器🎯 摘要本文详细介绍了如何开发一个名为"Hulk"的Ch

🦸‍♂️ 手把手教你开发一个超简单的 Chrome 扩展 - Hulk 变身器

本文作者：爱编程的喵

本文首发于掘金社区，转载请注明出处

🎯 前言

大家好，我是你们的小喵同学！今天我们要来开发一个超级简单的 Chrome 扩展，它的功能是让网页背景变成紫色。为什么要开发这个扩展呢？因为...紫色真的很酷啊！

🚀 开始动手

1️⃣ 创建项目结构

首先，让我们创建一个新的文件夹，就叫它 hulk 吧！在这个文件夹里，我们需要创建以下文件：

hulk/
  ├── manifest.json    // 扩展的配置文件
  ├── popup.html      // 弹出窗口的界面
  ├── popup.js        // 弹出窗口的逻辑
  ├── content.js      // 改变背景颜色的脚本
  └── icons/          // 存放图标的文件夹

2️⃣ 编写 manifest.json

这是扩展的"身份证"，告诉 Chrome 我们的扩展是什么、能做什么：

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

3️⃣ 设计弹出窗口 (popup.html)

让我们来设计一个漂亮的弹出窗口！🎨

<!DOCTYPE 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>
  <h2>改变背景颜色</h2>
  <p>点击下方按钮将当前页面背景色为紫色</p>
  <button id="changeColor">改变背景颜色</button>
  <script src="popup.js"></script>
</body>
</html>

4️⃣ 添加交互逻辑 (popup.js)

现在，让我们来添加一些魔法！✨

document.getElementById('changeColor').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'purple';
    }
  });
});

5️⃣ 注入页面脚本 (content.js)

最后，我们需要一个脚本来实际执行改变背景颜色的操作：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "changeColor") {
    document.body.style.backgroundColor = 'purple';
  }
});