chrome浏览器扩展开发入门

39次阅读

共计 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

正文完
 0