共计 1242 个字符，预计需要花费 4 分钟才能阅读完成。
一、环境安装
安装 nodejs
首先需要安装 nodejs，可以到官网下载，不过推荐使用 nvs 来安装 nodejs。这里使用的是 v11.5.0 版本
安装 yeoman
npm -g install yo
安装 generator-web-extension
npm 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
