I would like to insert an iframe (frame.html which is part of my extension) into the body of a website and then be able to receive click events for two buttons inside it.
Running into problems with same origin policy, etc.
I'm sure there is a relatively graceful workaround for this, but I'm not having much luck finding it.
I would like to insert an iframe (frame.html which is part of my extension) into the body of a website and then be able to receive click events for two buttons inside it.
Running into problems with same origin policy, etc.
I'm sure there is a relatively graceful workaround for this, but I'm not having much luck finding it.
Share Improve this question asked Dec 14, 2011 at 21:15 NoPyGodNoPyGod 5,0673 gold badges47 silver badges75 bronze badges 3- Are you sure you need to use an iframe? If it's not absolutely necessary, you'd avoid headaches like this by simply inserting your html directly into the website. – lakenen Commented Dec 14, 2011 at 21:21
- The website has a lot of custom CSS which screws up the delicate layout of the content i'm trying to insert. And even if I can get it to look ok now, there's no guarantee that the website's css won't change and screw it up again. Not to keen on playing cat and mouse. – NoPyGod Commented Dec 14, 2011 at 21:22
- Honestly, I am mildly certain this is impossible. You might consider resorting to a css "catch-all" that basically removes all possible styles from all of your elements. It seems hacky (and tedious), I know, but it might be your only option in this case. – lakenen Commented Dec 14, 2011 at 21:55
1 Answer
Reset to default 10You can use message events to let the injected iframe window municate with the content script (take care about security).
Here is a simple example. The extension injects an IFRAME element into all viewed pages via a content script. The frame contains a page with a button. The button has a click handler which sends a message to the top window. The content script has a listener to messages ing from the iframe which opens an alert displaying the message data.
manifest.json:
{
"name": "Test",
"version": "0.0.1",
"content_scripts": [ {
"matches": [ "http://*/*", "https://*/*" ],
"js": [ "content.js" ],
"run_at" : "document_end"
} ]
}
content.js:
var iframe = document.createElement("iframe");
iframe.src = chrome.runtime.getURL("iframe.html");
document.body.appendChild(iframe);
addEventListener("message", function(event) {
if (event.origin + "/" == chrome.runtime.getURL(""))
alert(event.data);
}, false);
iframe.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button id="button">Click me!</button>
<script>
document.getElementById("button").addEventListener("click", function() {
top.postMessage("clicked!", "*");
}, false);
</script>
</body>
</html>