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

发布时间:2020-07-20 09:07:49 作者:crackernet
来源:网络 阅读:2518

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的元素发过去      });    }  }  );


推荐阅读:
  1. python交互模式下命令tab补全
  2. Jquery的tab标签做法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

chorme扩展插件 tabs应用开发

上一篇:如何使用vue实现户籍管理系统

下一篇:如何使用php实现购物车产品删除功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》