利用WebExtensions技术开发浏览器扩展插件

利用WebExtensions技术开发浏览器扩展插件

新疆乌鲁木齐830002

摘要本文讲述了利用WebExtensions为Firefox浏览器开发扩展插件的基本方法,包括manifest.json配置文件的主要配置参数、扩展内部、外部本地应用程序相互之间的消息通信机制等。

关键字浏览器扩展WebExtensions开发配置消息通信

WebExtensions是一个新的浏览器扩展开发API,支持用HTML、CSS、JavaScript等标准Web技术进行扩展开发,它是一个跨浏览器的标准,兼容Firefox、Chrome、Edge等主流浏览器,为其中一种浏览器开发的扩展,只需做部分调整,即可在其它浏览器中运行。本文通过实例讲解利用WebExtensions为Firefox浏览器开发扩展。

1程序结构

WebExtensions扩展包括的主要文件有:manifest.json,用于配置扩展的各类属性和参数,每个扩展必须有一个。后台脚本(blackground)文件,扩展的主程序文件,运行在独立的进程空间,支持全部的WebExtensionsAPI。内容脚本(content)文件,注入到用户页面中执行,可以利用DOMAPI操纵用户页面内容,只支持部分WebExtensionsAPI。扩展内的脚本之间、不同扩展之间以及扩展和本地应用程序之间可以利用提供的消息机制进行通信。另外提供了用户界面的功能,可以为浏览器添加按钮、侧边栏面板、设置页面等,使用户可以与扩展交互。

2开发实例

下面通过讲解一个具体实例,使读者了解Firefox扩展开发的基本过程。假设你是一个英语学习者,需要从朗文词典网站上下载一些单词例句音频练习听力,假设需要下载football这个单词的例句音频,首先输入网址https://www.ldoceonline.com/dictionary/football,网页出现后,点击一个工具栏按钮,则自动将该网页上的所有例句音频下载到本地,同时将例句信息写入本地文件。

2.1创建manifest.json文件

首先创建manifest.json文件,设置扩展所需的元数据,包括扩展的功能描述、名称、版本等参数。

3安装发布

Firefox中打开“关于:调试”设置页面,点击“加载临时扩展”,选中扩展所在目录,就可以临时加载扩展进行测试,发布扩展只需将扩展所有文件打包成zip压缩文件即可。

参考文献

[1]https://developer.mozilla.org

[2]https://wiki.mozilla.org/WebExtensions

[3]莱西格贝比奥特jQuery实战

标签:;  ;  ;  

利用WebExtensions技术开发浏览器扩展插件
下载Doc文档

猜你喜欢