简介
Neweb-chrome-extension 是一款用于创建 Chrome 插件的 npm 包。它基于 Webpack，提供了一整套开发环境，可以非常方便地开发和调试 Chrome 插件。
这个 npm 包的使用非常简单，本文将介绍如何使用 neweb-chrome-extension 来创建和开发一个 Chrome 插件。
安装
使用 npm 安装 neweb-chrome-extension：
npm install --save-dev neweb-chrome-extension
创建项目
使用以下命令创建一个 neweb-chrome-extension 项目：
npx neweb-chrome-extension create my-extension
这将创建一个 my-extension 目录，包含一个基本的 Chrome 插件项目结构。
配置
在新建的项目中，找到文件 .webpack/webpack.config.js，这个文件是 Webpack 的配置文件。修改 entry 配置：
entry: {
background: ["./src/background.ts"]
},这里的 background 就是 Chrome 插件的后台脚本，改为自己需要的文件名。
开发
在项目根目录运行以下命令，启动开发服务器：
npm run build:watch
这个命令会自动编译代码，并在编译完成后刷新浏览器。现在，你可以在 Chrome 浏览器中打开插件页面，右键选择“检查”并切换到“扩展程序”选项卡，此时就可以开发和调试插件了。
打包
在项目根目录运行以下命令，将插件打包：
npm run build
这个命令会将插件打包成一个 zip 文件，可以通过 Chrome 浏览器的“扩展程序”界面安装。
示例代码
下面是一个简单的示例代码，将插件的后台脚本修改为：
-- -------------------- ---- -------
----------------------------------------- -- -
-------------------------- ------ --------- -- -- -- -
---------------- ----- -- ---------
---
---
------------------------------------------------ -- -
--------------------------------- -------- -- -
----- ----- - -------------
--------------------------------- -
----- -
----------------------------------- - -----------
--
---
---
---这个代码会在插件安装时，将本地存储的颜色设置为绿色，并在浏览器图标被点击时，将当前页面的背景色设置为存储的颜色。
总结
使用 neweb-chrome-extension 可以非常方便地开发和调试 Chrome 插件。它提供了一整套完整的开发环境，可以让开发者专注于插件本身的逻辑，而不必操心配置开发环境。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f77238a385564ab6903