Flash content in iframe overlaying chrome extension

Question

In short

Looking for a way to display position=fixed div on top of flash where the flash is inside an iframe.

The Question

I am currently developing a google chrome extension that displays a visual aid on top of the window.

Basically, this is a <div> tag with position:fixed.

The problem is some websites display flash content, and when my extension goes on top of those flash elements they overlay it. I would like to find a way to display my content on top of those flash elements.

The Problem

The flash is inside an iframe element, and has wmode set to window which means it overlays everything. However, I can not change the content of the flash element since it resides in a different domain (an attempt results in a same-origin error)

What I would like to avoid

I would like to avoid running the extension in every website and checking if its referrer is the site I'm running in

score 2 · Answer 1 · answered Aug 13 '12 at 20:08

2

You can execute a script in the context of an iframe like so:

var code = '[].forEach.call( document.querySelectorAll("embed"), function(embed){embed.setAttribute("wmode", "transparent")});';

chrome.tabs.executeScript( tabRef, {

    code: code,

    allFrames: true //Executes the script in all frames


}, function() { });

This will find all the embed elements and set their wmode to "transparent" so that a html element can overlay them.

See: http://developer.chrome.com/extensions/content_scripts.html#pi

answered Aug 13 '12 at 20:08

Esailija

138,174
23
272
326

Does this not require my extension to have permission to run in the iframe (meaning in a tld which is not on my list)? – Benjamin Gruenbaum Aug 14 '12 at 05:30
Yeah it does require tabs and permissions, why is that a problem? – Esailija Aug 14 '12 at 06:18
The extension has permission to run on a list of ~ 30 sites. However the flash content is in an iframe residing in another site. – Benjamin Gruenbaum Aug 14 '12 at 07:24
@BenjaminGruenbaum You could use these permissions: `"permissions": [ "http://*/*", "https://*/*", "tabs" ]` – Esailija Aug 14 '12 at 07:29
I know I can, but the user will be notified the extension will have all access to all websites and not just these 30. Is there no way to avoid this? – Benjamin Gruenbaum Aug 14 '12 at 08:27
@BenjaminGruenbaum Nope, you need to have permissions to access the iframe sorry. But access all sites is less intimidating than a list of 30 sites, probably :P – Esailija Aug 14 '12 at 09:41

score 1 · Accepted Answer · edited May 23 '17 at 12:09

I believe your question is very similar to this one: overlay opaque div over youtube iframe

If I understand correctly, the issue can be resolved by adding the wmode=opaque parameter in your iframe embed. For example (with a youtube video):

- HTML iframe embed

Make sure that the wmode=opaque parameter is the first parameter after the source url of the iframe (as mentioned here: overlay opaque div over youtube iframe)

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/CMNry4PE93Y?wmode=opaque" frameborder="0"></iframe>

- CSS

#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;

}

Actually, I'm running a chrome extension inside a webpage, however, I guess I can run (before $(document).ready hopefully) and change every src attribute of every iframe object to include ?wode=opaque . This is by far my best shot, thank you :) — Benjamin Gruenbaum, Aug 18 '12 at 12:51

Flash content in iframe overlaying chrome extension

2 Answers2