一键式 Chrome 扩展：用风格（或混乱）改变你的背景-js教程-PHP中文网

One-Click Chrome Extension: Change Your Background with Style (or Chaos)

如果您曾经想过只需单击一下即可为您的浏览器增添趣味（因为谁有时间不止一次，对吧？）那么一键式 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"
  }
}

登录后复制