一、环境安装安装nodejs首先需要安装nodejs，可以到官网下载，不过推荐使用nvs来安装nodejs。这里使用的是v11.5.0版本安装yeomannpm -g install yo安装generator-web-extensionnpm install -g generator-web-extension二、项目搭建# 创建项目目录mkdir helloworld && cd helloworld# 生成项目文件yo web-extension然后根据提示完成项目配置上图是询问是否需要UI ActionNo：不需要Browser：创建浏览器级别的UI ActionPage：创建页面级别的UI Action本示例选择Page来进行演示上图是询问是否需要覆盖一些浏览器的默认页面No：不需要Bookmarks Page：覆盖浏览器的书签页面History Page：覆盖浏览器的历史页面Newtab Page：覆盖浏览器的新标签页面本示例选择No上图是询问扩展需要的页面或者脚本Options Page：扩展的设置页面Devtools Page：在devtools里面的页面Content Scripts：在访问页面中运行的脚本Omnibox：给地址栏增加的功能按空格键根据需要进行选择，也可以按a键全部选择，本示例选择来全部上图是询问这个扩展需要的权限，因为这个扩展不只可以运行在chrome，还可以运行在firefox等其他一些浏览器上，有些权限是chrome浏览器不支持的，可以根据需要进行选择，也可以按a全选，然后后面再删除掉不支持的权限。这里为了简单先全选。然后接下来的一路按回车就可以了项目创建完毕三、运行项目编译项目npm run dev chrome可以看到编译生成了很多文件，生成的扩展目录是dist/chrome/用chrome把扩展加载起来打开chrome的扩展管理页面，打开开发者模式，加载已解压的扩展程序，选择刚才生成的dist/chrome/目录可以看到扩展已经加载了，但是有个错误按钮。点击这个按钮查看错误信息前面在选择权限的时候选择了所有权限，但是有些权限是chrome不支持的，因此需要把这些权限删掉扩展需要的页面、脚本、配置等都在app/目录里面，一般只需要修改里面的文件就可以了要修改权限，打开app/manifest.json文件，找到提示的几个权限全部删除掉重新加载一下扩展修改文件重新编译有点慢，多点几次应该就可以了随便打开一个页面，可以看到扩展已经成功运行了四、打包npm run build chrome运行完打包命令之后，会在packages/目录下面生成扩展的压缩包五、其他使用firefox加载扩展先进行编译npm run dev firefox用firefox进行加载firefox需要选中manifest.json文件可以看到扩展已经运行成功了六、附录Chrome扩展及应用开发【干货】Chrome插件(扩展)开发全攻略浏览器扩展generator-web-extension