前言：Chrome 扩展程序已成为浏览器中非常常见而强大的工具，而使用 npm 包 @kleenebok/create-chrome-extension 使得扩展程序的开发变得更加便捷。本文将从如何安装和使用 @kleenebok/create-chrome-extension 开始，逐步深入介绍其使用方法，并通过示例代码演示它的使用过程。
安装
在使用之前，需要先安装 Node.js 和 npm。安装完成后，在命令行中运行以下代码安装 @kleenebok/create-chrome-extension。
npm install -g @kleenebok/create-chrome-extension
使用
安装完成后，我们可以使用 create-chrome-extension 命令来创建一个新的扩展程序。该命令将在当前文件夹下创建一个新的项目，同时安装所需的依赖。
create-chrome-extension my-extension cd my-extension
然后我们可以使用 VS Code 打开 my-extension 文件夹，进行开发。如下是项目的结构：
-- -------------------- ---- -------
- -------
- ---
- ------
- -------
- --------
- ----------
- ----------
- --------
- -----
- --------
- ----------
- ---------
- ----------
- ------------
- ---------
- -----------------其中：
webpack目录存放 Webpack 配置文件。src目录存放源代码。src/assets目录存放扩展程序需要用到的资源文件。src/content目录存放注入到页面中的脚本和页面。src/background目录存放后台运行的脚本。src/popup目录存放弹出式窗口的脚本和页面。.eslintrc存放 ESLint 配置。.gitignore存放 Git 忽略文件。package.json存放项目配置和所需的依赖。README.md存放项目文档。webpack.config.js存放 Webpack 配置。
background
扩展程序的后台代码存放在 src/background 目录下。创建脚本文件 src/background/index.js，在其中添加如下代码：
console.log('Hello from background script');这里我们在后台脚本中输出一条信息，表示后台脚本已经成功运行。
content
在扩展程序中，可以将脚本注入到页面中，使其能够与页面交互。src/content 目录下的文件将被注入到所有页面中。我们创建一个名为 src/content/index.js 的脚本文件，注入到页面中，并在其中添加如下代码：
console.log('Hello from content script');这里我们在脚本中输出一条信息，表示脚本已经成功运行。
popup
弹出式窗口是扩展程序中的常见组件之一。弹出式窗口是用户可以通过单击浏览器图标打开的小窗口。我们创建一个名为 src/popup/index.js 的脚本文件，同时创建一个包含 Hello from popup 文本的 src/popup/index.html 文件。代码如下：
// src/popup/index.js
console.log('Hello from popup');-- -------------------- ---- ------- ---- -------------------- --- --------- ----- ----- ---------- ------ ----- ---------------- -------------------- ------- ------ --------- ---- ---------- ------- -------
编译
完成以上开发后，我们需要使用 Webpack 把这些代码打包到一起。我们可以使用如下代码来进行编译。
npm run build
Webpack 的配置文件 webpack.config.js 存放在 my-extension 目录下。我们可以在文件中修改配置，进行自定义设置。
完成编译后，我们就可以像使用普通扩展程序一样使用我们的扩展程序了。需要注意的是，每次更改了扩展程序代码后，都需要重新编译以使更改生效。
总结
在本文中，我们详细介绍了如何使用 npm 包 @kleenebok/create-chrome-extension 创建和开发扩展程序。同时，我们深入介绍了背景脚本、注入脚本和弹出式窗口的使用，包含了示例代码。希望这篇教程可以帮助到大家更好地开发 Chrome 扩展程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562181e8991b448d30f6