前言
WebExtensions 是一种跨浏览器平台的浏览器扩展开发模型，可以为用户提供强大的功能和扩展性，目前已成为前端开发者开发浏览器插件的首选方式。而在 WebExtensions 开发中，使用 generator-webext-sidebar 可以帮助我们快速创建具有侧边栏功能的浏览器插件，大大提高开发效率。
本文将介绍如何使用 generator-webext-sidebar，从安装到使用，详细介绍每个步骤，帮助读者快速掌握使用该 npm 包的方法。
安装 generator-webext-sidebar
在使用之前，我们需要先安装 generator-webext-sidebar。
使用 npm 安装 generator-webext-sidebar：
npm install -g yo generator-webext-sidebar
安装完成之后，可以检查是否成功安装 generator-webext-sidebar，方法如下：
yo --generators
此时应该能够在列表中看到 generator-webext-sidebar 的名字。
创建项目
使用 generator-webext-sidebar 创建项目非常简单，只要按照以下步骤即可。
- 首先，在命令行中进入你想要放置项目的文件夹，然后运行以下命令：
yo webext-sidebar
- 运行上面的命令后，会出现一些提示，需要回答一些问题。
问你的名字（默认值为你的用户名）：
Your name:
问你的电子邮件地址（默认值为你的电子邮件地址）：
Your email:
问你的扩展名（默认值为 "myWebExt"）：
What would you like to name your WebExtension?
问你是否需要自定义菜单（默认为 "yes"）：
Do you need a custom menu? (yes)
- 在回答完所有问题后，可以开始生成项目并安装依赖。
cd myWebExt npm install
- 安装完成后，你会看到项目结构。
├── package.json ├── scripts │ └── sidebar.js ├── src │ ├── manifest.json │ ├── sidebar.html │ └── sidebar.js └── webpack.config.js
至此，使用 generator-webext-sidebar 创建项目的过程就完成了。
使用 generator-webext-sidebar
generator-webext-sidebar 生成的项目包含一些基础代码和结构，可以帮助你快速创建一个浏览器扩展，并添加侧边栏。我们可以在此基础上进行开发。
添加侧边栏
侧边栏在这个扩展中是通过一个独立的文件 sidebar.html 来实现的。要添加侧边栏，需要做以下两个步骤：
- 在 sidebar.html 中编写所需的 HTML 和 JavaScript 代码。
- 在 manifest.json 中通过修改 sidebar_action 来引用 sidebar.html。
在 sidebar.html 中，你可以添加任何你想要的 HTML 和 JavaScript 代码，甚至可以使用 Reflect API 来访问其他网站的内容。
在 manifest.json 中，sidebar_action 属性用于指定要引用的 sidebar.html 文件。sidebar_action 中的 default_panel 属性用于指定默认内容。
下面是一个示例 manifest.json 文件：
-- -------------------- ---- -------
-
------- -----------
---------- --------
------------------- --
-------------- --- --- --------- ---- ---------
-------- -
----- -------------------
------ -------------------
--
----------------- -
--------------- ------------------
--
------------------ -
-
---------- ----------------
----- -----------------------
------------- ----
-
--
----------------- -
---------------- ---------------
------------------ ----
-
-在本示例中，sidebar_action 指向的是 sidebar.html 文件。在浏览器安装扩展时，侧边栏会自动打开。
打包、安装和发布扩展
generator-webext-sidebar 集成了 webpack 和 webpack-dev-server，支持热更新，你可以使用 dev 命令用于开发：
npm run dev
随后你可以重新打包你的扩展：
npm run build
在打包之后，使用以下命令可以在浏览器中测试你的扩展：
- 在浏览器的地址栏中输入
about:debugging并回车。 - 在左侧的导航面板中选择 "本地扩展", 并点击 "临时加载附加组件"。
- 导航到你的浏览器插件项目文件夹中的 manifest.json 文件并打开它。
当你准备将你的扩展发布到各个扩展商店时，需要生成一个 zip 文件来进行发布。运行以下命令即可生成 zip 文件：
npm run package
至此，我们已经完成了 generator-webext-sidebar 的使用教程。通过本教程，你已经学会了如何快速创建具有侧边栏功能的浏览器插件，并具备基本的开发能力。如果想了解更多关于 WebExtensions 的知识，可以前往 WebExtensions 官方文档查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600a81e8991b448ddd96