如何创建 Google Chrome 扩展程序：分步指南

# Web 开发 # JavaScript # 初学者

创建 Google Chrome 扩展程序是增强您的网络体验或展示您的网络开发技能的绝佳方式。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。

“名称”和“版本”描述扩展。

“操作”链接单击扩展图标时出现的弹出窗口。

步骤4：创建弹出界面

在同一文件夹中创建一个popup.html文件：




  My Extension


  Hello, Chrome!

使用 JavaScript 添加一些交互。创建 popup.js：

document.getElementById("changeColor").addEventListener("click", function() {
  document.body.style.backgroundColor = "#FFD700";
});

步骤 5：添加图标

准备三种尺寸（16x16、48x48 和 128x128 像素）的图标并将它们放在您的项目文件夹中。

步骤 6：在 Chrome 中加载扩展程序

打开 Chrome 并转到 chrome://extensions/。

启用开发者模式（在右上角切换）。

单击“加载解压的”并选择您的项目文件夹。

步骤 7：测试您的扩展

点击 Chrome 工具栏中的扩展程序图标，查看弹出窗口的运行情况。测试所有功能并确保一切正常运行。

可选增强功能

添加后台脚本，即使弹出窗口关闭也能执行操作。

使用内容脚本直接与网页交互。

探索高级 API，例如用于保存数据的 chrome.storage 或用于脚本间通信的 chrome.runtime。

**最后的想法：**

构建 Chrome 扩展程序是一个有益的过程，它可以从简单的工具扩展到功能强大的应用程序。有了这个基本结构，您可以从小处着手，随着学习的深入扩展您的扩展程序。深入了解 Chrome 的开发者文档以了解更多高级功能。

CLIS.CC