Develop Reference

Select an iframe inside a shadow-root (closed)

I want to obtain this iframe that it's inside a shadow-root (closed):
image of shadow root
I have tried already multiple things like document.querySelector("iframe[style*='display:block']").innerHTML or document.querySelector("iframe[style*='display:block']") but none of this works.
How can I obtain this iframe?

Styling elements inside HTML inside iframe inside a webpage

I have a complete webpage (html/css/js) wrapped inside iframe within my webpage, this was called by javascript, of course this is from using 3rd party services. is there any way to style the elements inside the html within the iframe? since I dont have control over the webpage it calls, so I cant style them directly from my own webpage.

No. Not possible. You cannot edit html inside an iframe since it is controlled by other domain.

How to find out whether an element is in a hidden iframe

Using jQuery, one can easily find out whether a particular element is visible using
$(element).is(':visible')
While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe.
If the element has any parent within its document with display:none;, it returns false. If the whole document is included in an iframe which has display:none, it returns true. Is it possible to somehow detect this in another way ?

Hmm, seems like you have to call top (parent) document within an iframe, then search for specific iframe and check if it's visible.
You'll probably have to have same domain/subdomain for this to work, but anyway:
Let's assume you know iframe id/class (you have to).
if ($(top).find('#iframeID').is(':visible')) {
// iframe is visible
} else {
// iframe is NOT visible
}
Can't guarantee correct work.

Seems that the window's frameElement property works in all browsers and delivers the current iframe where the window is contained (if cross-domain restriction doesn't apply, which was my case).

not possible afaik. an iframe is basically a different site and as such guarded against xss. simply don't use iframes but server-side includes.

Trap for click on IFRAME

I have a an iframe which inside there is a video link from somwhere.
I want popup a div when click on iframe.
<a href="javascript:alert();" class="iframelink">
<iframe src="http://www.youtube.com/embed/zDNXx-PgU3k" width="213" height="195" frameborder="0"></iframe>
</a>
$('.iframelink').click(function(){
alert('iframe clicked. Open popup.');
})
How? But because is actually another page javascript cant catch click event.
Is there any way?

Since you have to attach the handler on a link inside an iframe, you should find it inside the iframe. Try this.
$('a.iframelink iframe').contents()//Will get iframe contents
.find('videoLinkSelector')//Pass the required selector
.click(function(){
//Write your code here
});
contents() reference: http://api.jquery.com/contents/
Note that you can only access iframe resources only if it is in the same domain as its parent page.

Apart from being rather naughty and placing an invisible element over the top of your IFRAME (click-jacking), I think you're out of luck as I don't think events within the IFRAME bubble up at all. Careful here - you're in dangerous territory. Thar be monsters.
P.S. one option would be to have the IFRAME point to a page on your site, that you could add an onclick event to - which would then fire a function/event on the parent element - however you're still going to be out of luck when it comes to firing on clicking the FLASH object I think.

You can try to leverage the YouTube API.
http://code.google.com/apis/youtube/js_api_reference.html#Adding_event_listener
Though it is limited you may be able to do what you need to.

How do I dynamically add a div element to any page from a Firefox extension/Addon

I am writing an extension for firefox which will be used to annotate pages on the web via a service. I would like to have a div or an overlay element (probably XUL based) at the bottom of the page which will let people annotate a page and save it. Something like what the Google Friend Connect does on this page, but via an addon.
This floating div/overlay should show up for every page on FF and should render contents from a web service. How do I start building this out?
If it is possible to access DOM via a FF plugin and alter it, then I would like to be able to add a floating div to the body of the document. But that doesn't work either. Example posted here: Dynamically adding a floating div to a page

There are several things you have to do:
You probably want to add some custom CSS to style the div. You can use the stylesheet service.
You have to attach an event handler to the load event ( or DOMContentLoaded), to be notified when a page finished loading. Have a look at Intercepting Page Loads and On page load.
You need a reference to element you want the new element append to. Tabbed Browser provides some useful information. E.g. you can get a reference to the body of the current selected tab gBrowser.contentDocument.body.
Regarding your code example: You forgot the give the element the CSS property position: absolute; or position: fixed; (you have a typo in your code, you wrote postion), depending on whether it should appear at the bottom of the page or the screen.

You can do this (because I have). To do it you'll need to find the node you want to change the content of (if you're adding to the bottom of the page, you may want to use the <body> node I guess) and then call one of:
insertBefore(theNewNode, afterThisNode);
insertAfter(theNewNode, thisNode);
Or possibly, but I'm not sure:
anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;
That should be enough to get you started.