无法使用jquery访问通过谷歌浏览器内容脚本注入的iframe内容

时间:2011-09-22 04:47:12

标签: javascript jquery google-chrome iframe google-chrome-extension

所以我通过将一个内容脚本注入到正文中来创建这个chrome扩展:

这是我的javascript:

test.js:

$(document).ready(function(){
   Url = chrome.extension.getURL('etc.html');
   link = '<iframe src="' + Url + '" id="frame" scrolling="no" frameborder="0px"></iframe>';
   $('body').prepend(link);
   alert($('.test').html());   
});

这是应该转到iframe的etchtml的内容

etc.html:

<div class="test">An html</div>

这是我的manifest.json

的manifest.json:

{
   "content_scripts": [ {
      "all_frames": true,
      "js": [ "js/jquery.js", "js/test.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ],
   "description": "Testing",
   "name": "test",
   "permissions": [ "tabs", "http://*/*", "https://*/*", "notifications", "management", "unlimitedStorage", "bookmarks", "contextMenus", "cookies", "geolocation", "history", "idle" ],
   "version": "2.0.0.53"
}

iframe已成功插入正文,iframe内容出现,我通过Chrome检查器看到了它......

但是当js运行alert($('.test').html());行时,它返回null而不是返回html ....在开发此类扩展时,我究竟如何访问iframe中的内容

我也试过$('#frame').contents().find('.test').html();无效

1 个答案:

答案 0 :(得分:0)

我很确定你做不到。 现在我找不到任何在线支持这个但我记得有这个问题。我认为它的原因是其他脚本和扩展不会弄乱你的等等。

你可以做的是在http://html内部使用javascript访问并修改其DOM。如果您需要它与注入iframe的内容脚本进行通信,您可以通过在后台页面中传递消息来实现:http://code.google.com/chrome/extensions/messaging.html

例如,您可以通过简单的一次性请求执行此操作:

etc.html

chrome.extension.sendRequest(msg)

backround.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    chrome.tabs.sendRequest(sender.tab.id, request);
});

contentscript.js

chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
    //do stuff
}

你可以用postMessage和onMessage做类似的事情。 如果您需要更多帮助,请告诉我。我在我的扩展中广泛使用这种技术。