如何创建 Google Chrome 扩展程序：分步指南-js教程-PHP中文网

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

Barbara Streisand

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

原创

514 人浏览过

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";
});

登录后复制