在前端开发中，网页扩展程序是非常常见的构建方式。如何快速地创建一个 Web 扩展程序呢？npm 包 create-webextension 就可以帮你轻松实现。本篇文章将为大家介绍该 npm 包的使用教程，并提供详细的示例代码。
安装 create-webextension
首先，我们需要在命令行中执行以下命令安装 create-webextension：
npm install -g create-webextension
创建一个 Web 扩展程序
接下来，在命令行中使用 create-webextension 命令创建一个新的 Web 扩展程序。执行以下命令：
create-webextension my-extension
其中，my-extension 为你的扩展程序名称，可以根据实际情况进行修改。
目录结构介绍
接下来，我们来看一下 create-webextension 创建的目录结构。创建完成后，会在当前目录下生成一个新的名为 my-extension 的文件夹。在其中，包含了以下文件和文件夹：
-- -------------------- ---- -------
-------------
--- ---------
--- ------
--- ------
--- ----------
--- ---------
--- --------
--- -------------
--- -------------
--- ------------_locales/
这个文件夹用来存放本地化信息的文件，可以根据需求自行修改。
icons/
这个文件夹用来存放扩展程序所需的图标文件，如 16x16、48x48 和 128x128 大小的图标。可以根据需求添加或修改。
background.js
这个文件主要用来处理长期运行的后台代码，如请求调用和消息监听等等。
manifest.json
这个文件是 Web 扩展程序的配置文件，通过修改此文件可以配置扩展程序的名称、描述、版本号、图标、权限等等。
options.html
这个文件是选项页面的 HTML，通过在 manifest.json 中配置 options_page 字段可以将其与扩展程序集成。
popup/
这个文件夹包含了弹出式窗口页面的 HTML、CSS 和 JavaScript 文件。
示例代码
下面，我们来修改弹出式窗口页面的示例代码。在 popup 文件夹中，打开 index.html 文件，修改内容如下：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
----- ---------------- -----------------
-------
------
------ ----- ---------
--------- --- --------
------- -------------- ----------------------
------- ------------------------
-------
-------在 index.css 中，添加以下样式：
-- -------------------- ---- ------- -- - ---------- ---- ------ ----- - - - ---------- ------ ------ ----- -
在 index.js 中，添加以下 JavaScript 代码：
document.getElementById('btn').addEventListener('click', function () {
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});当用户点击发送消息按钮时，会向 background.js 发送一条消息并在控制台输出回调函数的返回值。在 background.js 中，添加以下代码：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});至此，我们已经成功地创建了一个简单的 Web 扩展程序并实现了消息交互功能。通过修改和添加不同文件中的代码，我们可以实现更加复杂和完善的扩展程序。
总结
使用 npm 包 create-webextension 可以帮助我们快速地创建一个简单、易用、功能丰富的 Web 扩展程序。通过本文中的示例代码，我们了解了创建和配置一个 Web 扩展程序的基本步骤，并实现了消息交互功能。相信您已经可以开始构建自己的扩展程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a9181e8991b448d80ef