从零到 Chrome 英雄：如何构建和启动您自己的浏览器扩展-js教程-PHP中文网

From Zero to Chrome Hero: How to Build and Launch Your Own Browser Extension

Chrome 扩展程序是可以增强您的浏览体验的强大工具。在这篇详细的博客文章中，我将逐步介绍创建简单的 Chrome 扩展程序并将其上传到 Chrome 网上应用店的过程。准备好从编码毛毛虫转变为 Chrome 蝴蝶！

第 1 步：开发您的扩展

为您的扩展创建一个新目录。
创建一个manifest.json文件：

   {
     "manifest_version": 2,  // Specifies the version of the manifest file format
     "name": "My First Extension",  // The name of your extension
     "version": "1.0",  // The version of your extension
     "description": "A simple Chrome extension.",  // A brief description of your extension
     "browser_action": {
       "default_popup": "popup.html"  // Specifies the HTML file to be used as the popup
     },
     "permissions": [
       "activeTab"  // Requests permission to access the currently active tab
     ]
   }

登录后复制

manifest.json 文件是 Chrome 扩展程序的核心。它提供有关 Chrome 扩展程序的重要信息，例如其名称、版本和所需权限。请先删除评论再继续

创建popup.html：

   <!DOCTYPE html>
   <html>
     <head>
       <title>My First Extension</title>
     </head>
     <body>
       <h1>Hello, World!</h1>
       <script src="popup.js"></script>  <!-- Links to the JavaScript file -->
     </body>
   </html>

登录后复制

此 HTML 文件定义了扩展程序弹出窗口的结构。这是一个简单的页面，带有标题和 JavaScript 文件的链接。

创建popup.js：

   document.addEventListener('DOMContentLoaded', function() {
     console.log('Extension popup loaded');
   });

登录后复制

此 JavaScript 文件包含扩展程序弹出窗口的逻辑。事件监听器在执行函数之前等待 DOM 完全加载，该函数只是将消息记录到控制台。

在本地测试您的扩展：
- 打开 Chrome 并转到 chrome://extensions/
- 启用右上角的“开发者模式”
- 点击“加载解压”并选择您的扩展目录

这些步骤允许您在 Chrome 中加载和测试您的扩展程序，而无需将其发布到网上应用店。

第 2 步：如何让你的扩展看起来很时髦

准备提交

创建高质量图标：
- 16x16：用于图标
- 48x48：用于扩展管理页面
- 128x128：适用于 Chrome 网上应用店

这些图标代表您在 Chrome 和网上应用店中不同位置的扩展程序。

截取屏幕截图（1280x800 或 640x400 像素）：
- 捕获正在运行的扩展
- 突出显示主要功能

屏幕截图让潜在用户可以预览您的扩展程序的功能。

写一个引人注目的描述：
- 清楚地解释您的扩展程序的用途
- 列出主要功能和优点
- 使用项目符号以提高可读性

良好的描述可以帮助用户了解您的扩展程序并提高其在搜索结果中的可见性。

选择合适的类别：
- 最多选择 5 个相关类别
- 这可以帮助用户找到您的扩展程序

正确的分类可以让用户在浏览或搜索网上应用店时更轻松地发现您的扩展程序。

第 3 步：创建开发者帐户（Extension Stardom 的 5 美元门票）

转到 Chrome 开发者仪表板。
使用您的 Google 帐户登录或创建一个新帐户。
支付一次性开发者注册费（5 美元）。
如果需要，请验证您的电子邮件地址。

要在 Chrome 应用商店中发布扩展程序，必须执行此步骤。该费用有助于防止垃圾邮件和低质量的扩展。

第 4 步：上传您的扩展

点击开发者仪表板中的“新项目”。
创建您的扩展的 ZIP 文件：
- 包含所有必要的文件（manifest.json、HTML、JS、CSS、图标）
- 排除任何不必要的文件或目录
上传 ZIP 文件。
填写所有必填字段：
- 详细说明
- 至少2张截图
- 促销图块图像（440x280 像素）
- 图标（16x16、48x48、128x128）
- 选择主要类别和附加类别
设置可见性选项：
- 公开：Chrome 网上应用店中的所有用户都可以看到
- 未列出：只能通过直接链接访问
设置定价和分销：
- 免费或付费（如果付费，请设置 Google Payments 商家帐户）
- 选择要分发的国家/地区