不能使用jquery访问通过Google chrome内容脚本注入的iframe内容

can't access content of iframe injected via google chrome content script using jquery

本文关键字：脚本 注入 内容 iframe chrome Google jquery 访问 不能      更新时间：2023-09-26

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

这是我的javascript:

. 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());   
});

这是etc.html的内容应该放到iframe

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();，但无济于事

我很确定你不能那样做。现在我在网上找不到任何支持这个的东西，但我记得有这个问题。我认为这样做的原因是其他脚本和扩展不会扰乱你的etc.html。

你能做的就是让javascript在etc.html内部访问并修改它的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。如果你需要更多帮助，请告诉我。

相关文章：