chrome扩展与标签tab的内容交互-阿里云开发者社区

开发者社区> 科技探索者> 正文

chrome扩展与标签tab的内容交互

简介:
+关注继续查看

chrome插件提供了查找tab的api:

  chrome.tabs.get(integer tabId, function callback)


但是出于安全的考虑,tab的属性中没有document,因此无法在扩展中直接获取某个页签页面中的页面元素,但是tab有这样一个方法:

  chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)

他可以在扩展中对某一个tab进行请求,发送请求信息;在对应的tab页面中通过

  chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...});对扩展中的请求进行监听,根据监听到的信息,决定要做的事情


简单一点的,简明实例:
一、在扩展中 添加 发送事件请求 的代码

  chrome.tabs.sendRequest(tab_id, {      hello: "ok"    }, function(response) {        // tab做出响应,发来的response })



二、在 tab中添加 事件监听的代码

在manifest.json中添加

  "content_scripts": [    {      "matches": ["*://*/*"],      "js": ["jquery.min.js","test.js"]    }  ],  "permissions": ["*://*/*","tabs"]


其目的是在每个标签页面加载的时候同时载入这两个js,获取tabs的权限

在test.js 中放入监听 扩展 请求事件的代码

  chrome.extension.onRequest.addListener(  function(request, sender, sendResponse) {    if (request.hello == "ok"){  // 在得到request请求是ok的时候 做下面的操作      sendResponse({        data: $("#hello") // 获取id是hello的元素发过去      });    }  }  );

本文转自问道博客51CTO博客,原文链接http://blog.51cto.com/450236/1852046如需转载请自行联系原作者


crackernet

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2509 0
fbh
h5 meta标签大全
H5标准声明,使用 HTML5 doctype,不区分大小写 标准的 lang 属性写法 声明文档使用的字符编码 优先使用 IE 最新版本和 Chrome 页面描述 页面...
895 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8947 0
chrome新建标签 打开主页 谷歌浏览器新建标签页自动打开主页
今天逮到一个好的chrome应用,标签页重定向,每次新建标签页我是不打算再忍受那种谷歌的缓存了,http://url.cn/7E78nR 去这里添加进谷歌浏览器吧。。自动跳到你想打开的首页!
874 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11029 0
jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs)
Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码。
1016 0
隐藏tabControl的标签
  一、隐藏和显示tabControl1中的tabpage的方法:                 tabControl1.tabPage1.Parent = tabControl1; // 显示                 tabControl1.
739 0
如何用<dl>标签做表格而不用table标签
  我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友好,table太多话可能无法被SE收录,有没办法用其他方法来实现绘制表格呢?比如用标签?    标签是定义列表(defi...
930 0
5489
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载