chrome浏览器扩展开发入门

一、环境安装

安装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 Action
No：不需要
Browser：创建浏览器级别的UI Action
Page：创建页面级别的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