一鍵式 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中文網其他相關文章！