共计 1303 个字符，预计需要花费 4 分钟才能阅读完成。
本文介绍如何快速创建一个基于 webpack 构建的 chrome 扩展，由于 chrome 扩展开发概念很多，如果需要，请结合附录食用。
首先需要安装好 nodejs，推荐用 nvs 或其他工具管理 node 版本。这里用的是 v8.5.0 版本（之前用了 v11.1.0 在运行 npm start 的时候会报错，因为对 chrome 扩展来说 node 只是个构建工具，并且用 nvs 来管理 node 版本切换很方便，就不追究为什么报错了）。
一、安装 yeoman
node -g install yo
二、安装生成 chrome 扩展的 generator
npm install -g generator-chrome-extension-kickstart
三、使用 yeoman 创建项目
# 创建一个空目录
mkdir helloworld && cd helloworld
# 运行 yeoman 生成项目
yo chrome-extension-kickstart .
然后按照提示进行项目配置
上图是选择需要创建的 UI actionNo：不创建 Browser：浏览器级别的 action，一个浏览器一个实例 Page：页面级别的 action，每个页面一个实例
这里我们先选择 Page
上图是选择需要覆盖的浏览器的一些默认页面 No：不需要覆盖任何默认页面 Bookmarks Page：覆盖书签页面 History Page：覆盖历史页面 Newtab Page：覆盖新标签页面
这里我们选择 No
上图是选择这个扩展需要的一些页面或者脚本 Options Page：表示需要一个配置页面 Devtools Page：表示在 Devtools 里需要新建一个页面 Content Scripts：表示需要一个与所访问的页面一起运行的脚本 Omnibox：表示给浏览器地址栏增加一个功能
这里我们全部选择，都来演示一下。根据提示，按 a 全选
上图是这个扩展需要的浏览器权限，比如 Cookies 就是扩展可以获取到 cookie 数据
这里为了简单就按 a 全选了。接下来一路回车就可以了
上图可以看出 yeoman 为我们生成了很多项目文件并且安装了依赖
四、运行扩展
启动项目编译
npm start
可以看到项目已经编译完生成了几个文件
开另外一个命令行窗口
编译生成的文件在 dist/chrome/ 目录下，可以用浏览器把这个目录加载起来
打开浏览器的扩展管理页面，打开开发者模式，然后加载已解压的扩展程序，选择编译生成的 dist/chrome/ 目录
然后发现扩展显示了一个错误按钮
点击进去之后提示 ’input’ is not allowed for specified platform.，这个是因为我们之前选择权限的时候选择了全部，但是 input 权限不支持，我们需要删掉这个权限（或者也可以在选择权限的时候不勾选 input）。
打开 app/manifest.json 文件，把这一行删掉
然后重新加载一下扩展，错误按钮就不见了
可以看到扩展已经成功运行起来了
五、进行开发
项目主要文件在 app/ 目录下面，一般只要修改这里面的文件就够了
六、打包
npm run build
运行完上面的命令之后，会在 packages/ 目录下生成 zip 包
七、附录
《Chrome 扩展及应用开发》
【干货】Chrome 插件 (扩展) 开发全攻略
