How to add stylesheet to iframe?

I have a web-page where I have injected Content Script (webextentions). JQuerry adds stylesheet here. How can I do it to add the same stylesheet which is in the web-page to its iframe document? I think it is not possible to access the iframe document by the Content Script, is?

This was asked in 2010, today in 2015, this
would not work in any newer browser, unless you are developing to
google.com. Because of cross origin policy, you cannot access the
content of the iframe, if it points to a page on a different domain than
the one your original document is loaded from.
– aorcsik

1 Like

That depends on the origin and sandbox settings of the iframe.
The iframes DOM may be accessible try:
document.querySelector('iframe').contentDocument.head.appendChild(styleElement)

1 Like

Here I try to add styles to iframe using JQuery:

iframes = $("iframe[class~='wysiwyg']");

get iframes

  if (iframes)
    $.each(iframes.prevObject, function( k, iframe ) {
      add_styles(package.easy.task, iframe);  
    });

call add_styles() with iframes.prevObject array

easy_add_styles =
function(task, iframe = null){
    if ( iframe.body )
      {
      var contents = $(iframe.body).contents()
      for ( var k in task.search )
        {
        console.log(contents.find(task.search[k]));
        contents.find(task.search[k]).css(task.css[k]);
        }
      }
}

the first logs what is in iframe and the second logs the selectors found in current iteration.

task.search is array of selectors, the task.css is array of styles.

But for some reason the styles were not applied.

Should I use .each on the array of selectors?

I test it on this page trying to change the white editor to black,

1 Like

I’m sorry, but I don’t like JQuery and never had to use it. In WebExtensions you really don’t need jQuery for compatibility, so unless you know (and like) its API, I don’t thinkk you should use it.

The snippet I have provided in my previous post will ether work or throw an obvious exception. Try to work from there.

I’m not sure what jQuery plugin or API you’re using, but in general, you can’t just access iframe.body, you’ll need to get the iframe element, then access its contentDocument (or contentWindow.document, if supporting old IE). Once you have the iframed document element, you can append stylesheets or style elements in the framed page.

Have a look at MDN for more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Good luck!

1 Like

There is good reason why to use JQuery. It save me a lot of work. I can add extra features to my plugin saving me weeks of programming.

1 Like

When I created this question, I didn’t realized that in the tool which I am working on currently there is no stylesheets to be used. What it does is that it adds styles to DOM elements. First I parse css defined and saved by user, and then I add it to the DOM elements. I use selectors to find the tags and to add styles to them. My program can see the body of the iframe. I can iterate through the elements inside the iframe.

http://oi67.tinypic.com/jhvnv8.jpg

I think the problem could be that there are classes defined in the iframe. Maybe it will help to remove the classes. I will experiment with it yet.

When you inject a content script with WEAPI you have an option to inejct css as well. For example:

"content_scripts": [
  {
    "matches": ["*://*.mozilla.org/*"],
    "css": ["mystyle.css"]
  }
]

Is this approach not working out?

1 Like

Does this need to enable all_frames?

When I created this question, I didn’t realized that in the tool which I am working on currently there is no stylesheets to be used. What it does is that it adds styles to DOM elements.

I have solved this problem; successfully applied styles to iframe.

Had the same issue, but just with colors. Ended up with a nice solution if it’s just about color. Google “CSS filter” (I like the W3 page). You can do ANYTHING. Even use SVGs. Cheers

Hello NilkasG :slight_smile: The frequent challenge with iframe is that they are dynamic. Meaning, they are very hard to add stylesheet to, mostly because their property often get reset on load and such.

To resolve this challenge, Developer frequently choose to use JQuery. Because it’s very good at resolving challenges with ay dynamic stuff like iframe. Including its load.