简介
generator-chrome-modern-extension 是一款 npm 包，是一个 Chrome 扩展程序的脚手架。它可以帮助我们快速地创建一个现代化的 Chrome 扩展程序，并且可以用于开发和部署。该包使用了一些最新的前端技术，如 React、Webpack、ESLint 等，可以帮助我们更快捷、更高效地开发和调试我们的 Chrome 扩展程序。
安装
首先，我们需要在本地安装 Yeoman 和 generator-chrome-modern-extension，可以使用以下命令：
npm install -g yo generator-chrome-modern-extension
注意：如果是在 Mac 或者 Linux 系统下操作，需要在命令前面加上 sudo。
安装完成后，我们就可以使用 generator-chrome-modern-extension 来创建我们的 Chrome 扩展程序了。
创建
在安装完成后，我们可以使用以下命令在当前目录下创建一个新的 Chrome 扩展程序：
yo chrome-modern-extension
这个命令将会弹出一个交互式的命令行提示，可以帮助我们生成一个现代化的 Chrome 扩展程序。首先让我们输入我们的应用程序名称：
? What is your application name? my-chrome-extension
接下来，让我们输入我们的应用程序描述：
? What is your application description? This is a demo of a modern Chrome extension.
之后，让我们输入我们的扩展程序的唯一标识符（通常是一个 URL）：
? What is your application identifier (usually a URL)? https://www.example.com
然后，可以选择使用 TypeScript 还是 JavaScript 来编写我们的应用程序：
? What language do you want to use? TypeScript
最后，让我们选择一些常用的默认选项，完成创建：
-- -------------------- ---- ------- - ----- -------- -- --- ---- -- -------- ----- ---------- ------------ --- ------------- ------ ------- -------- ------- ------ --------- ---------- ------- - -------- ------- ---- -------------------- ------ ------- ------------- ------- -- -------- --------- ---- --------- ------- --- -------- ------------ ----- ---------- -- ----- - ---------- ------------ - --- ------------- ------ - ------- -------- - ------- ------ - --------- ----- -- --- ---- -- ------ ---- --------
这样，我们就创建好了一个现代化的 Chrome 扩展程序，包括了以下内容：
- 一个 TypeScript 的入口文件，在 src/index.ts 里。
- 一个 pop-up 页面，在 src/popup/popup.tsx 里。
- 用于打包和运行我们的应用程序的 Webpack 配置文件。
- 一些常用的功能，如热更新、ESLint、Jest 等。
开发
在创建好了我们的扩展程序之后，我们就可以开始开发了。我们可以在 src/index.ts 文件里编写应用程序的逻辑，并在 src/popup/popup.tsx 里编写 pop-up 页面的逻辑。在开发过程中，我们可以使用以下命令启动开发服务器：
npm run start
这个命令将会编译我们的代码，并在我们的扩展程序里启动一个开发服务器。我们可以在 Chrome 浏览器的扩展程序管理页面（chrome://extensions/）里打开「开发者模式」，然后点击「加载已解压的扩展程序」，选择我们生成的 dist 目录，加载我们的扩展程序。
在扩展程序加载之后，我们可以在 Distil Networks 的首页（默认）右侧看到一个浮动按钮，点击它，我们就能看到我们的 pop-up 页面了。
部署
当我们开发完成后，我们需要将我们的应用打包并发布到 Chrome 商店或其他地方。我们可以使用以下命令打包我们的应用程序：
npm run build
这个命令将会使用 Webpack 打包我们的应用程序，并将生成的文件保存到 dist 目录下。我们可以将 dist 目录下的文件直接上传到 Chrome 商店或者其他地方，以供其他用户使用。
学习和指导
generator-chrome-modern-extension 是一款非常实用的 npm 包，可以帮助我们更快、更简单地开发我们的 Chrome 扩展程序。它使用了一些最新的前端技术，可以教我们如何使用这些技术来开发现代化的 Chrome 扩展程序。
如果你想学习更多关于 generator-chrome-modern-extension 的使用和详解，可以参考它的 GitHub 页面：https://github.com/martellaj/generator-chrome-modern-extension。
我们也可以参考其他优秀的 Chrome 扩展程序的源码，从中学习更多的技能和经验。例如，我们可以参考「Todoist Quick Add」这款 Chrome 扩展程序的源码，来了解如何实现一个简洁、高效的 Chrome 扩展程序：https://github.com/Doist/todoist-quick-add。
示例代码
以下是一个简单的热更新的 TypeScript 文件示例：
if (module.hot) {
module.hot.accept();
}以下是一个简单的 pop-up 页面示例：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - -- -------- ---- ------------
------ ----------------
------ ---------------
----- ----- ------- --------------- -
-------- -
------ -
---- ------------------
--------- -----------
------- -- - ---- -- - ------ ------ --------------
------
--
-
-
---------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf381e8991b448e6a65