通过jQuery访问Chrome扩展内容脚本中跨域iframe的HTML?

时间:2018-12-19 12:28:53

标签: javascript jquery google-chrome

我正在开发一个chrome扩展程序,该扩展程序收集在网站上投放的展示广告进行研究。我正在尝试通过jquery访问广告html,如下所示:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){   
if(request.todo == "CaptureAds"){
    frames = $('iframe')
    for(var iter=0;iter<frames.length;iter++){
        console.log('==================IFRAME====================')
        console.log('A')
        console.log(frames[iter])
        console.log('B')
        console.log(frames[iter].contentDocument)
        console.log('C')
        console.log(frames[iter].src)
    }
}

});

这给了我以下结果:

An cross-origin iframe that I can print but cannot access to the html of

Two normal iframes that I can print and have access to their html as well

我在stackoverflow上查找了多个问题,这些问题导致了postMessage方法。就我而言,我没有对iframe的编辑权限,因此无法按照这些解决方案中的建议在两个iframe之间进行交流。在这种情况下,有人可以提出一种绕过同源策略而不干扰浏览器设置的方法吗。

这是我的清单:

{
"manifest_version": 2,
"name": "xyz",
"version": "1.0",
"description": "abc",
"icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
},
"page_action": {
    "default_icon": "images/get_started16.png",
    "default_popup" : "popup.html",
    "default_title": "example"
},
"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
},
"content_scripts": [
    {
        "matches": ["https://www.example.com/*"],
        "js": ["content.js", "jquery-3.3.1.min.js"],
        "all_frames": true
    }
],
"permissions": ["activeTab","https://www.example.com/*","webNavigation"]

}

1 个答案:

答案 0 :(得分:0)

所以-好消息是您的代码中已经包含"all_frames" : true。您可能想拥有

"matches": [
        "<all_urls>"
      ],
如果要在所有网页上加载此功能,请在清单中显示

。对于谁是谁的父母,您必须构造一棵树。

基本上,您的内容脚本将被加载到父框架以及该框架中的iframe中。您可以使用referrer property并通过

获取哪个URL加载了哪个页面。
window.document.referrer

,并且您的iframe应该指向您的父框架。我不知道您的限制,但是我想您可以弄清楚什么是父页面(或者也许您已经知道吗?),所以说 Page A在iframe中加载了Page B 。在那个阶段,您的内容脚本都在这两个脚本中,因此您可以访问这两个脚本。