如何建立 Google Chrome 擴充功能：逐步指南-js教程-PHP中文網

如何建立 Google Chrome 擴充功能：逐步指南

Barbara Streisand

發布： 2025-01-03 18:52:39

原創

515 人瀏覽過

How To Create a Google Chrome Extension: Step-by-Step Guide

建立 Google Chrome 擴充功能是增強 Web 體驗或展示 Web 開發技能的好方法。 Chrome 擴充功能是小型軟體程序，可透過擴展 Chrome 的功能來客製化您的瀏覽體驗。這是一個快速指南，可幫助您從頭開始建立自己的 Chrome 擴充功能。

第 1 步：了解基礎

在深入研究之前，請先了解 Chrome 擴充功能的關鍵組件：

清單檔案 (manifest.json)： 擴充的設定檔。
HTML/CSS/JavaScript 檔案： 定義擴充程式的介面和功能。
圖示和其他資產：用於品牌推廣和精美外觀。

第 2 步：設定您的項目

為您的擴充檔案建立一個資料夾。這將保存所有必需的文件。
在此資料夾中，建立一個名為manifest.json的檔案。

第3步：撰寫清單檔案

manifest.json 是您的擴充的藍圖。這是一個基本範例：

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension to demonstrate functionality.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon48.png"
  }
}

登入後複製

說明：

"manifest_version": 3 指定使用Manifest V3，最新版本。
“名稱”和“版本”描述了擴充功能。
「action」連結點擊擴充功能圖示時將出現的彈出視窗。

第四步：建立彈出式介面

在同一資料夾中建立 popup.html 檔案：

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
</head>
<body>
  <h1>Hello, Chrome!</h1>
  <button>



<ol>
<li>Add some interactivity with JavaScript. Create popup.js:
</li>
</ol>

<pre class="brush:php;toolbar:false">document.getElementById("changeColor").addEventListener("click", function() {
  document.body.style.backgroundColor = "#FFD700";
});

登入後複製