chrome浏览器扩展开发入门

一、环境安装

安装nodejs

首先需要安装nodejs,可以到官网下载,不过推荐使用nvs来安装nodejs。这里使用的是v11.5.0版本
《chrome浏览器扩展开发入门》

安装yeoman

npm -g install yo

《chrome浏览器扩展开发入门》

安装generator-web-extension

npm install -g generator-web-extension

《chrome浏览器扩展开发入门》

二、项目搭建

# 创建项目目录
mkdir helloworld && cd helloworld
# 生成项目文件
yo web-extension

然后根据提示完成项目配置
《chrome浏览器扩展开发入门》

上图是询问是否需要UI Action

No:不需要

Browser:创建浏览器级别的UI Action

Page:创建页面级别的UI Action

本示例选择Page来进行演示
《chrome浏览器扩展开发入门》

上图是询问是否需要覆盖一些浏览器的默认页面

No:不需要

Bookmarks Page:覆盖浏览器的书签页面

History Page:覆盖浏览器的历史页面

Newtab Page:覆盖浏览器的新标签页面

本示例选择No
《chrome浏览器扩展开发入门》

上图是询问扩展需要的页面或者脚本

Options Page:扩展的设置页面

Devtools Page:在devtools里面的页面

Content Scripts:在访问页面中运行的脚本

Omnibox:给地址栏增加的功能

空格键根据需要进行选择,也可以按a键全部选择,本示例选择来全部
《chrome浏览器扩展开发入门》

上图是询问这个扩展需要的权限,因为这个扩展不只可以运行在
chrome,还可以运行在
firefox等其他一些浏览器上,有些权限是
chrome浏览器不支持的,可以根据需要进行选择,也可以按
a全选,然后后面再删除掉不支持的权限。这里为了简单先全选。

然后接下来的一路按回车就可以了
《chrome浏览器扩展开发入门》

项目创建完毕

三、运行项目

编译项目

npm run dev chrome

《chrome浏览器扩展开发入门》

可以看到编译生成了很多文件,生成的扩展目录是
dist/chrome/

用chrome把扩展加载起来

《chrome浏览器扩展开发入门》

打开
chrome的扩展管理页面,打开开发者模式,加载已解压的扩展程序,选择刚才生成的
dist/chrome/目录

《chrome浏览器扩展开发入门》

可以看到扩展已经加载了,但是有个错误按钮。点击这个按钮查看错误信息

《chrome浏览器扩展开发入门》

前面在选择权限的时候选择了所有权限,但是有些权限是
chrome不支持的,因此需要把这些权限删掉

扩展需要的页面、脚本、配置等都在app/目录里面,一般只需要修改里面的文件就可以了
要修改权限,打开app/manifest.json文件,找到提示的几个权限全部删除掉
《chrome浏览器扩展开发入门》

重新加载一下扩展
《chrome浏览器扩展开发入门》

修改文件重新编译有点慢,多点几次应该就可以了

随便打开一个页面,可以看到扩展已经成功运行了
《chrome浏览器扩展开发入门》

四、打包

npm run build chrome

《chrome浏览器扩展开发入门》
《chrome浏览器扩展开发入门》

运行完打包命令之后,会在
packages/目录下面生成扩展的压缩包

五、其他

使用firefox加载扩展

先进行编译

npm run dev firefox

《chrome浏览器扩展开发入门》
firefox进行加载
《chrome浏览器扩展开发入门》

《chrome浏览器扩展开发入门》

《chrome浏览器扩展开发入门》

firefox需要选中
manifest.json文件

《chrome浏览器扩展开发入门》

可以看到扩展已经运行成功了

六、附录

    原文作者:xxyyzz
    原文地址: https://segmentfault.com/a/1190000017478259
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞