一键式 Chrome 扩展：用风格（或混乱）改变你的背景

如果您曾经想过只需单击一下即可为您的浏览器增添趣味（因为谁有时间不止一次，对吧？）那么一键式 Chrome 扩展程序就是您所需要的你需要。这些扩展程序旨在通过单击按钮来执行一些有用的（或搞笑的毫无意义的）事情。在本文中，我们将向您展示如何快速构建您自己的一键扩展。准备好改变世界……或者只是改变网页的背景颜色。我们不是来评判的。

什么是一键式 Chrome 扩展程序？

将一键式 Chrome 扩展视为浏览器的魔法按钮。你点击它，然后——瞧！——事情发生了。无论是改变背景颜色、给你鼓舞人心的名言，还是触发跳舞的猫动画（我们不会阻止你），世界都是你的。在本教程中，我们将从简单的事情开始：一键将网页的背景变成舒缓的浅蓝色。简单的？你打赌。

第 1 步：创建您的扩展文件夹（又名“一切都会好起来”文件夹）

首先，您需要设置一个文件夹来存储您的扩展文件。称之为一键扩展或更戏剧性的东西，比如“把世界变成蓝色”。在此文件夹中，您需要一些基本文件：

• manifest.json（你的扩展程序的大脑）
• background.js（这是幕后的向导）
• popup.html（用户单击扩展图标时看到的内容）
• popup.js（执行操作的神奇脚本）

文件夹结构：

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

第 2 步：创建清单文件（又名扩展的大脑）

manifest.json 是扩展程序的大脑。它告诉 Chrome 您的扩展程序的用途以及如何使其工作。没有它，您的扩展就像一辆没有引擎的汽车 - 看起来很漂亮，但完全没用。

这是一个示例清单，它将告诉 Chrome 加载我们的扩展程序：

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

第 3 步：构建弹出式 UI（又名“嘿，点击我！”按钮）

弹出窗口是用户单击您的扩展程序图标时看到的内容。在我们的例子中，我们需要一个按钮，单击该按钮可以更改页面的背景颜色。很简单，对吧？就像一根魔杖，但没有被诅咒的危险。

这是 popup.html：

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

第 5 步：后台脚本（又名“别碰我，我正在工作”文件）

您的background.js 文件在后台运行。所有繁重的工作都是由沉默的工人完成的——比如确保你的扩展在你不注意的时候正常工作。在本例中，我们不需要太多，但如果您愿意，可以在这里添加更复杂的功能。

现在，只需添加以下基本设置：

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

第 6 步：添加图标（可选，但强烈推荐）

图标就像您的扩展程序的衣柜 - 它们使其在工具栏中看起来很漂亮。您可以添加不同尺寸的图标（例如，16x16.png、48x48.png、128x128.png）。 Chrome 每当需要显示您的扩展程序时都会使用这些。

只需创建一个图标文件夹并添加您要使用的图标即可。

第 7 步：将您的扩展加载到 Chrome 中（又名“关键时刻”）

是时候测试你的杰作了。以下是将扩展程序加载到 Chrome 中的方法：

1. 打开 Chrome 并转到 chrome://extensions/。
2. 启用“开发者模式”（就像终身启用作弊码一样）。
3. 点击“加载解压”并选择一键扩展文件夹。
4. 您的扩展图标现在应该出现在工具栏中。看看它。佩服它。点击它。

第 8 步：测试一下（又名“耶，它有效！”的时刻）

单击您的扩展程序图标。应该会出现一个弹出窗口，其中有一个按钮，上面写着“更改背景”。当你点击它时，当前网页的背景颜色应该变成浅蓝色，就像完美的一天里平静的海洋。

结论（又名“你做到了”部分）

恭喜！您已经构建了自己的一键式 Chrome 扩展程序。这个简单的工具可以扩展到您想要的任何内容，无论是更改页面的颜色、添加励志名言，还是使页面播放流畅的爵士乐。可能性是无限的。

既然您已经掌握了这一点，您就可以让互联网变得更加有趣了。继续创造一些令人惊奇的东西，或者至少，一些让你的朋友认为你是某种巫师的东西。 ✨

以上是一键式 Chrome 扩展：用风格（或混乱）改变你的背景的详细内容。更多信息请关注PHP中文网其他相关文章！