当前位置: 代码迷 >> Web前端 >> chrome扩充 与页签tab的内容的交互
  详细解决方案

chrome扩充 与页签tab的内容的交互

热度:113   发布时间:2012-11-12 12:31:57.0
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的元素发过去
      });
    }
  }
  );

  相关解决方案