在前端开发中，我们经常需要将代码打包成浏览器扩展（Chrome Extension）的形式来发布或测试。而将代码打包成浏览器扩展需要进行一系列的操作，但是 npm 包 crx-packager 可以帮助我们完成这些操作，并且还提供了一些额外的功能。下面就来介绍一下 crx-packager 的使用方法。
安装
crx-packager 可以通过 npm 安装，命令如下：
$ npm install -g crx-packager
安装完成后，我们就可以使用 crx-packager 进行打包操作了。
打包操作
运行 crx-packager 命令，需要传入两个参数，分别是代码所在的目录和打包后生成的文件名。例如：
$ crx-packager ./my-extension my-extension.crx
运行该命令后，将在 my-extension 目录下生成 my-extension.crx 文件。这个文件就是我们需要的浏览器扩展。
配置文件
在打包操作时，我们还可以通过配置文件来设置一些参数。配置文件使用 JSON 格式编写，例如：
{
"privateKey": "key.pem",
"codebase": "https://example.com",
"updateUrl": "https://example.com/update.xml"
}配置文件需要命名为 crx.json 并放在代码所在的目录下。配置文件的参数说明如下：
- privateKey：扩展的私钥文件路径，用于所生成的 .crx 文件和更新的 .xml 文件的签名。
- codebase：用于浏览器快速安装和更新扩展的 URL。如果没有设置，则使用扩展 ID 做为 URL。
- updateUrl：用于检查扩展更新的 URL，要求是 XML 文件的形式。如果没有设置，则不会检查更新。
示例代码
以下是一个使用 crx-packager 打包 Chrome 插件的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ----------------- ------- ------------------------ ------- ------ ---------- ----------- ------- ------------------- ----------- ------- -------
// popup.js
document.getElementById('click-me').addEventListener('click', () => {
chrome.tabs.create({
url: 'https://www.google.com'
});
});在代码所在目录下创建 crx.json 文件：
{
"privateKey": "key.pem",
"codebase": "https://example.com",
"updateUrl": "https://example.com/update.xml"
}运行命令：
$ crx-packager . my-extension.crx
运行成功后，即可在当前目录下看到生成的 my-extension.crx 文件。
总结
crx-packager 是一个十分方便的 npm 包，可以帮助我们快速打包浏览器扩展，并且配置文件功能也能够满足一些特定的需求。使用 crx-packager 可以极大地提高我们的开发效率，是前端开发中必不可少的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73678