关于chrome插件编写的小结

摘要:
后台处理脚本后。htm侦听消息,它调用sendResponse方法返回数据。2.弹出窗口。html将消息广播到每个页面popup.html的处理脚本。获取数据后,它调用chrome.tabs。要广播的sendRequest方法。但是铬。tabs sendRequest方法需要指定选项卡的ID。在我尝试了一些方法后,如getCurrent、getAllInWindow等,我觉得效果无法实现。如果当前未选择指定的页面怎么办?

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

关于chrome插件编写的小结第1张

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

关于chrome插件编写的小结第2张

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

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

关于chrome插件编写的小结第3张

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

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

关于chrome插件编写的小结第4张

点击后,弹出调试器

关于chrome插件编写的小结第5张

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方法返回数据

关于chrome插件编写的小结第6张

关于chrome插件编写的小结第7张

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

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

关于chrome插件编写的小结第8张

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

关于chrome插件编写的小结第9张

关于chrome插件编写的小结第10张

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

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

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

关于chrome插件编写的小结第11张

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

image

关于chrome插件编写的小结第13张

参考资料:

Getting Started: Building a Chrome Extension

chrome.tabs

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

BootStrap Form Builder

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

免责声明:文章转载自《关于chrome插件编写的小结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇《Cython系列》2. 编译并运行Cython代码ActiveX控件实现下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

模拟代理安装---User-Agent Switcher for Chrome安装

模拟代理安装: 1. 百度User-Agent Switcher for Chrome进行下载 2. 直接安装 1. 进入扩展程序界面 2. 拖动插件进行安装 3.安装成功后会显示一个插件标志,里面可以进行修改User-Agent: 4.访问百度,查看network -->User-Agent:...

html颜色代码对照表

<style type="text/css"><!--.menuskin {}{    BORDER: #666666 1px solid; VISIBILITY: hidden; FONT: 12px Verdana;width:90px;    POSITION: absolute;     BACKGROUND-COLOR:#EF...

如何下载Chrome离线版EXE安装文件和MSI版安装文件

对于稳定版(正式版)Chrome来说,只需要在Chrome的“最终用户许可协议”页面链接后面添加”?standalone=1″即可,地址也就是: http://www.google.com/chrome/eula.html?standalone=1 对于Beta以及Dev版Chrome来说,只需要记住下面这个地址: http://dl.google.co...

WPFProgressBarAndSlider随位置显示Value

先来一发图,有图有真相。 核心代码如下 ProgressBar添加一个textBlock 绑定Value并且位置绑定进度条的实际宽度 <Canvas Margin="0 0 0 5"> <TextBlock x:Name="tb" TextWrapping="N...

第三方授权认证(一)实现第三方授权登录、分享以及获取用户资料

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9057257             由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字和图片等这样的效果,几经波折,查阅了一番资料,做了一个Demo。实现起来的效果还是不错的,不敢独享,决定写一个总结的教程,供大家互相交...

mac-chrome下手动安装vue-devtools

原文链接:https://blog.csdn.net/weixin_44868003/article/details/89457089 废话就不多说,直接上安装步骤,一步一步来 => success 1.下载安装vue-devtools源文件 mkdir vuetools cd vuetools git clone https://...