如何编写 Chrome 扩展程序：带有示例代码的分步指南

已发表: 2022-04-10

浏览器扩展是一种很好的方式来充分利用您的编码技能并构建一些允许您只需单击几下即可完成重复性任务的东西。如果您想实现这一目标，学习如何编写 Chrome 扩展程序是一个很好的开始。

Google Chrome 为其扩展程序开发人员提供了许多不同的 API，例如添加新页面、弹出窗口、创建通知、设置默认搜索引擎，甚至创建上下文菜单项（右键单击时显示的菜单）在页面上）。

从呈现“Hello World！”的扩展中，可能性是无限的。到允许您截取网页屏幕截图的扩展程序。

如何编写 Chrome 扩展程序：结构

在我们继续之前，您应该查看 Google Chrome 的开发人员文档以了解一般的 Chrome 扩展程序开发。

此外，如果您想为 Chrome Web Store 编写 Chrome 扩展程序，请查看他们的单一用途政策。

让我们首先在您的设备上创建一个名为notify的新文件夹。此文件夹将包含将成为您的扩展的一部分的所有内容。

现在，您需要创建一个清单文件，其中将包含有关我们扩展的所有信息。创建一个名为manifest.json的文件并包含以下代码：

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 代码语言： JSON / JSON with Comments ( json )

如您所见，到目前为止，它仅包含有关您的扩展的元信息，例如其名称、描述和版本。 manifest_version告诉 Chrome 您正在使用哪个版本的扩展 API。

加载扩展

准备好清单文件后，您可以在 Chrome 浏览器中加载扩展程序：

通过导航到chrome://extensions打开扩展管理页面，或者您也可以从设置中的扩展菜单打开它。

在那里，启用开发人员模式并使用Load unpacked按钮选择您的扩展目录。

看你的延伸！现在您的扩展程序已加载，您可以逐步改进它并观察更改。

确保将扩展图标添加到assets/icons/文件夹，否则将出现默认图标。

添加弹出用户界面

让我们继续向扩展中添加一些用户界面，人们可以在其中与提供的选项进行交互。

有多种方法可以做到这一点，例如添加整个页面，但弹出窗口通常是大多数扩展的方式。

要向扩展添加弹出窗口，您必须将其添加到您的manifest.json文件中：

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 代码语言： JavaScript （ javascript ）

有了这个，你告诉扩展你的弹出的 HTML 文件的位置和默认图标。这只是默认图标，因为 API 允许您随时更改图标。例如，如果您创建一个 Google PageSpeed 测试，可以根据网页排名在网站上显示不同的图标。

Google Chrome 扩展程序的弹出窗口

现在，您可以将弹出窗口的 HTML 代码添加到文件中，就像我们在示例中所做的那样：

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 代码语言： HTML、XML （ xml ）

此 HTML 文件还链接到样式表和脚本，以向我们的弹出窗口添加样式和功能。

如果您跟随，您可以从这里获取 CSS 代码。我们将在本教程后面将 JavaScript 添加到文件中。

到目前为止，您已经创建了一个带有弹出窗口的 Google Chrome 扩展程序，并且只用了几行代码。正如我们在开始时所说，创建 Google Chrome 扩展非常简单！

在本教程中继续前进，我们将向此扩展添加功能，并使其不仅仅是一个占位符。

使用通知 API

正如扩展名所暗示的那样，它是一个通知扩展，所以让我们添加一些！

在使用某些 API 之前，您需要在manifest.json文件中为它们指定权限。这样做的原因之一是让您的扩展用户在安装它们之前知道您的扩展要求哪些权限。

对于通知，您可以这样做：

 "permissions" : [ "notifications" ],
 代码语言： JavaScript （ javascript ）

您还需要将服务工作者添加到扩展程序以发送通知。为此，您需要将其添加到清单中：

 "background" : { "service_worker" : "background.js" },
 代码语言： JavaScript （ javascript ）

您需要通知 API 的服务工作者，因为它不能直接从popup.js文件中使用。

在background.js文件中，您需要添加以下代码来发送通知：

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 代码语言： JavaScript （ javascript ）

在这里，我们使用onMessage事件侦听器来获取从弹出窗口推送通知的触发器。

我们还使用create方法来创建新的通知。通知可以有多种类型，但这里使用“基本”类型。您应该查看所有可用的选项。

现在create方法已经到位，您可以从popup.js文件中触发它，如下所示：

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 代码语言： JavaScript （ javascript ）

在这里， sendMessage操作用于触发通知。瞧！我们有一个触发通知的扩展。

确保您使用的是最新版本的 Google Chrome，并已授予其触发通知的权限。简而言之，不要像我一样花费数小时试图弄清楚为什么没有出现通知。

添加上下文菜单项

如介绍中所述，上下文菜单是右键单击时出现的菜单：

您的扩展程序可能有上下文菜单项可能有很多原因。一个突出的例子是用光标选择一些文本，然后在谷歌上搜索。

您可以根据需要向上下文菜单添加任意数量的项目，但如果您的扩展程序添加了多个项目，它们将折叠在一个父项目下。

为此，您还需要向清单文件添加权限：

 "permissions" : [ "contextMenus" , "notifications" ],
 代码语言： JavaScript （ javascript ）

现在您已经添加了contextMenus的权限，您可以将其添加到您的background.js文件中：

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 代码语言： JavaScript （ javascript ）

上面的代码还包括上一步中用于触发通知的代码，该通知现在被抽象到notify函数中，以便可以重用。

contextMenus.create操作用于将项目添加到上下文菜单。它与onInstalled挂钩，因为它只需要初始化一次。

之后，与上一步类似，我们使用contextMenus.onClicked来捕获点击并触发通知。

它可以是一个非常漂亮的方式来捆绑你的扩展的功能。如果您环顾浏览器上正在使用的扩展程序，您会发现许多扩展程序巧妙地利用此空间来增强其扩展程序的体验。

使用 storage API 存储数据

现在您的扩展程序有一些功能可以展示，让我们看一下存储 API。当您想将一些用户数据存储到您的扩展程序时，存储 API 很有用。

Storage API 有两种类型：本地和同步。顾名思义，本地存储保存在您的浏览器中并保持在本地。相比之下，同步存储允许使用同一 Google 帐户在浏览器之间同步数据。出于我们的目的，我们使用本地存储。

首先，您需要在清单文件中添加存储权限：

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 代码语言： JavaScript （ javascript ）

在此之后，您可以使用 storage、 storage.local.get和storage.local.set方法来检索或保存数据。

您可以将以下代码添加到您的popup.js文件中：

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 代码语言： JavaScript （ javascript ）

这段代码做了两件事：

当我们打开弹出窗口或存储值更改时，它会更新弹出窗口中的通知计数。为了监听存储变化，使用storage.onChanged 。
在某种程度上，当用户单击重置按钮时，我们会清除存储空间。

上面的代码完成了获取最新计数并更新它的工作。现在设置数据仍然存在。为此，您可以使用以下命令更新我们的notify功能：

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 代码语言： JavaScript （ javascript ）

在这里，我们获取最新的存储数据，然后用最新的计数更新它。

同样，您可以使用chrome.storage.sync API 在浏览器之间同步选项。

分发扩展

恭喜！你已经做到了！您已成功创建了一个 Google Chrome 扩展程序，该扩展程序使用了 Google Chrome 体验的许多不同部分，包括：

弹出窗口
通知 API
上下文菜单
存储 API

如果您想查看此扩展的代码，可以在此 Notify GitHub 存储库中获取。

我们都喜欢炫耀我们为世界所做的伟大工作。扩展完成后，您可以将其提交到 Chrome 网上应用店以供其他 Chrome 用户下载。

如果您想探索 Google Chrome 为扩展开发者提供的其他选项，我们建议您查看官方文档。

我希望这篇文章在教你如何编写 Chrome 扩展方面发挥了作用。 我们很高兴看到您可以创建什么，因此请在下面的评论部分中告诉我们您使用 Google Chrome 扩展程序开发的冒险经历。

您也可能对。。。有兴趣：

18 家适用于 Web 开发、设计、营销等的最佳 WordPress 代理商
目前市场上 15 款最佳网站设计软件
比较和测试的 9 个最佳网站构建器解决方案

如何创建 Google #Chrome #extension：初学者分步指南

点击推文

…

不要忘记加入我们关于加快 WordPress 网站速度的速成课程。通过一些简单的修复，您甚至可以将加载时间减少 50-80%：

Chris Fitzgerald 和 Karol K. 的布局和演示。