关于chrome插件编写的小结

一个插件的大致目录结构如下:

其中manifest文件最为重要,它定义/指明插件应用的相关信息(权限、版本、功能说明等),点此查看Manifest的详情>>

这里有一篇chrome官方提供的插件编写的例子<Getting Started:Building a Chrome Extension>

popup.html的说明,就是浏览器导航上的插件按钮点击后的弹出页面

background.htm是一个始终运行于浏览器后台的页面,浏览器关闭时它才被关闭,可以作为一个监听者

地址栏访问:chrome://extensions/  载入编写插件的目录

点击后,弹出调试器

content_scripts 可以直接操作网页,相当于指定域名下页面,外链了一个JS文件。

注:插件的icon尺寸大小 width * height = 128px * 128px,可以通过http://www.easyicon.net/进行搜索

下面说一下几个容易混淆的地方:

一、插件的作用域

插件环境:popup.html、background_page

页面环境:content_scripts

所有content_scripts无法直接获取popup.html页中通过localStorage存储的数据,需要借助background.htm进行中转。

popup.html可以使用ajax进行跨域请求数据,但受manifest中的permissions选项的限制(需要指定相应的域名),content_scripts跟页面一样,不能直接跨域请求数据

二、脚本的载入

所有的页面(html/htm)不能直接嵌入内联JavaScript函数,都必须使用script标签引入,如果使用内联脚本,控制台会报错

三、生命周期

popup.html 可以认为它是一个网页,由导航上的插件按钮点击时载入(里面的脚本开始执行),关闭弹出层时也就关闭了这个网页(里面的代码亦不会再执行)

background.htm 在插件启用后浏览器进程存在的情况下开始,浏览器关闭时或插件卸载时结束

content_scripts 与浏览的页面生命周期同步

四、消息传递

一般来讲,是在popup.html中操作后,需要同步至各content_scripts中,这就存在几个问题:

1、popup.html被激活时,如何广播消息至各tab页;

2、当激活指定的tab页时,content_scripts如何获取popup.html中存储的相关数据;

当popup.html关闭时,content_scripts需要通过background.htm赤获取数据,当popup.html激活并获得相关数据后,需要广播消息出去。

1、content_scripts 获取数据

调用chrome.extension.sendRequest方法,发送相应的数据出去。background.htm的处理脚本监听到消息后,调用sendResponse方法返回数据

2、popup.html 广播消息至各页面

popup.html的处理脚本,在得到数据后,调用chrome.tabs.sendRequest方法广播。但是chrome.tabs.sendRequest方法需要指定tab选项卡的id (tab页的一个标识ID)

在我尝试过一些方法,如:getCurrent、getAllInWindow等方法后,感觉达不到效果,如果当前并不是选中指定的页面呢?后来尝试使用query方法,被我发现可以遍历获得所有满足条件的tab页

通过URL这个属性就可以进行过滤,然后拿到tabId,再调用sendRequest方法,content_scripts 再监听消息获得数据就可以对页面进行任意修改了。

这样在popup.html页面操作后,所有满足条件的页面均能实现自动更新(包括刷新页面操作)

popup.html相应的脚本代码处理方法(查询并发送消息)

content_scripts 对应的脚本处理函数(接受消息)

参考资料:

Getting Started: Building a Chrome Extension

chrome.tabs

360极速浏览器应用开放平台 - 消息传递

BootStrap Form Builder

Chrome 网上应用商店 CRX生成工具

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java学习网

提升效率的Linux终端快捷操作汇总

提升效率的Linux终端快捷操作汇总 很多普通 Linux 桌面用户都对使用终端感到排斥和恐惧,其实它没大家想的那么复杂,很多常见操作都可以直接在终端中进行,如...

3267
来自专栏coding

Linux笔记3

1253
来自专栏北京马哥教育

最实用也最容易被遗忘的 Linux 命令行使用技巧

作为一个日常在Linux环境下工作的工程师,每天都要大量使用Linux命令行。有时候我们会在网上翻查命令行的使用技巧,但是一旦未能及时进行练习,很快就会把这些...

3217
来自专栏lonelydawn的前端猿区

基于java swing的设备管理系统

一.系统介绍 一个简易的设备管理系统,包含了管理员登录注册、设备录入、设备状态管理功能,具体状态有购买时、正在运行、正在修理和已报废。 二.开发环境 开发环境:...

3117
来自专栏前端正义联盟

gitflow 开发流程学习(第一部分)

3257
来自专栏iKcamp

走进Node.js 之 HTTP实现分析

作者:正龙(沪江Web前端开发工程师) 本文为原创文章,转载请注明作者及出处 上文“走进Node.js启动过程”中我们算是成功入门了。既然Node.js的强...

3496
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第十九天 Linux学习【悟空教程】

UNIX操作系统是商业版,需要收费,价格比Microsoft Windows正版要贵一些。不过UNIX有免费版的,例如:NetBSD等类似UNIX版本。

1644
来自专栏ionic3+

【开发指南】(六)Ionic3从目录结构理解开发

对比目前其它流行的js框架,个人觉得其分工明确、清晰好理解,我觉得就算一开始头脑一遍空白的新手,对他讲解过一次后都能有个大致印象。

1001
来自专栏移动应用测试

adbui 使用说明

adbui 所有的功能都是通过 adb 命令,adbui 的特色是可以通过 xpath,ocr 获取 ui 元素。

34316
来自专栏分享达人秀

掌握Android Studio项目结构,扬帆起航

经过前面的学习,Android Studio开发环境已准备OK,运行Android应用程序的原生模拟器和Genymotion模拟器都准备妥当。在之前简单...

41810

扫码关注云+社区

领取腾讯云代金券