一鍵式 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"
  }
}

登入後複製