javascript - Communication between created Iframe and extension, google chrome extension - Stack Overflow

admin管理员组

文章数量:1355789

I try to send message from an iframe loaded from my extension to my extension (background script or content script). The created Iframe is loaded from the extension via a content script. I am searching for a way to municate but all my attempts failed...

Manifest.json

{
"author": "***********",
"background": {
    "page": "back/background.html",
    "persistent": true
},
"browser_action": {
    "default_title": "***",
    "default_popup": "./popup/popup.html"
},
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["./content/allurls.js"],
        "all_frames":true
    },
    {
        "matches": ["<all_urls>"],
        "js": ["./banner/confirm_banner.js"]
    }
],
"web_accessible_resources": [
    "frame.html"
],
"description": "oui",
"manifest_version": 2,
"name": "***",
"permissions": ["tabs"],
"version": "1.0"
}

Confirm_banner.js (load the iframe)

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;

window.onload = load_iframe();

function load_iframe()
{
if (!location.ancestorOrigins.contains(extensionOrigin)) 
{
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('../frame.html');
    iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
                           'width:100%;height:40px;';
    document.body.appendChild(iframe);
}
}

Frame.js (script linked with frame.html)

$(document).ready(function()
{
    $('#jamais').click(function()
    {
        send_message("BANNER", "jamais");
        alert("send");
    });
});

function send_message(type, data)
{
    var msg = {
        type: type,
        data: data
    };
    window.postMessage(msg, "*");
}

Handler in allurls.js (content script)

window.addEventListener('message', function(event) {
    if (event.data.type && (event.data.type === 'BANNER'))
    {
        alert("ouimonsieur");
    }
});

So the message from iframe.js is well sent (prooved by the alert) but the content script recieve nothing from it, even before the :

if (event.data.type && (event.data.type === 'BANNER'))

Can someone see what is wrong or what other message passing protocol i can use (i also tried with top.window.postmessage) ?

I try to send message from an iframe loaded from my extension to my extension (background script or content script). The created Iframe is loaded from the extension via a content script. I am searching for a way to municate but all my attempts failed...

Manifest.json

{
"author": "***********",
"background": {
    "page": "back/background.html",
    "persistent": true
},
"browser_action": {
    "default_title": "***",
    "default_popup": "./popup/popup.html"
},
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["./content/allurls.js"],
        "all_frames":true
    },
    {
        "matches": ["<all_urls>"],
        "js": ["./banner/confirm_banner.js"]
    }
],
"web_accessible_resources": [
    "frame.html"
],
"description": "oui",
"manifest_version": 2,
"name": "***",
"permissions": ["tabs"],
"version": "1.0"
}

Confirm_banner.js (load the iframe)

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;

window.onload = load_iframe();

function load_iframe()
{
if (!location.ancestorOrigins.contains(extensionOrigin)) 
{
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('../frame.html');
    iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
                           'width:100%;height:40px;';
    document.body.appendChild(iframe);
}
}

Frame.js (script linked with frame.html)

$(document).ready(function()
{
    $('#jamais').click(function()
    {
        send_message("BANNER", "jamais");
        alert("send");
    });
});

function send_message(type, data)
{
    var msg = {
        type: type,
        data: data
    };
    window.postMessage(msg, "*");
}

Handler in allurls.js (content script)

window.addEventListener('message', function(event) {
    if (event.data.type && (event.data.type === 'BANNER'))
    {
        alert("ouimonsieur");
    }
});

So the message from iframe.js is well sent (prooved by the alert) but the content script recieve nothing from it, even before the :

if (event.data.type && (event.data.type === 'BANNER'))

Can someone see what is wrong or what other message passing protocol i can use (i also tried with top.window.postmessage) ?

• javascript
• iframe
• google-chrome-extension

Share Improve this question Follow edited Sep 8, 2017 at 14:23 maitre queuche asked Sep 8, 2017 at 14:09 maitre queuchemaitre queuche 15111 silver badge99 bronze badges 4

• window in the iframe refers to the iframe's window. You need to send to parent – woxxom Commented Sep 8, 2017 at 14:43
• hum ok i will try that, however the content script is supposed to go in all iframe in the page so i still don't understand why it doesn't works. – maitre queuche Commented Sep 8, 2017 at 14:45
• Frame.js is not a content script, it's a iframe script and runs in the context of the extension. – woxxom Commented Sep 8, 2017 at 14:47
• Ok it works, i replaced window.postmessage by parent.postmessage and it works perfectly, thanks you. Wanna post answer so i validate it ? – maitre queuche Commented Sep 8, 2017 at 14:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Ty wOxxOm for the answer, i was close :

just replace window by parent in frame.js and all works perfectly.

Because even if the content script run in iframe,

Frame.js is not a content script, it's a iframe script and runs in the context of the extension.

Usage of window.postMessage in this case is not secure.

To implement a connection passing sensitive data probably you should use one of the solutions from this answers.

本文标签：