本文介绍如何快速创建一个基于webpack构建的chrome扩展，由于chrome扩展开发概念很多，如果需要，请结合附录食用。首先需要安装好nodejs，推荐用nvs或其他工具管理node版本。这里用的是v8.5.0版本（之前用了v11.1.0在运行npm start的时候会报错，因为对chrome扩展来说node只是个构建工具，并且用nvs来管理node版本切换很方便，就不追究为什么报错了）。一、安装yeomannode -g install yo二、安装生成chrome扩展的generatornpm 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插件(扩展)开发全攻略