1

I've been messing with iframe for chrome extensions and I seem to be running into a lot of issues with iframes. Anyways, I have an iframe injected into a website(cross-domain). What I'd like is for the iframes background image to inherit the parents page background(So it blends in). So this is what I am trying:

//Setup iframe attributes
iframe.setAttribute("id","injected_frame");
iframe.setAttribute("src", 'google.com');
iframe.setAttribute("width","100%");
iframe.setAttribute("height","425");
iframe.setAttribute("frameborder","0");
iframe.setAttribute("scrolling","auto");
iframe.setAttribute("style","backgroundImage: inherit"); <-- undefined error

Basically it just doesn't work, background stays the same and I get an undefined error when trying this.

kurast
  • 1,660
  • 3
  • 17
  • 38
Joshua Redfield
  • 2,217
  • 2
  • 14
  • 10

1 Answers1

1

You could probably just change "backgroundImage: inherit" to "background-image: inherit", but then any other inline styles on iframe may be lost because I believe that would reset the style attribute completely.

Thus, I would instead recommend replacing the last line with iframe.style.backgroundImage = "inherit";

Jake Stoeffler
  • 2,662
  • 24
  • 27
  • Wait a minute, so you're trying to change the background of google.com when it's embedded in your iframe? If that's the case, I don't believe it's possible with JS, due to cross-domain restrictions. Read this: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Jake Stoeffler Jan 15 '12 at 18:31
  • Well the google part was just an example, but yes that's basically what I am trying to accomplish. I've googled it a lot and I get the same response about it not being possible due to cross domain restrictions. This is a google extension I am trying to make, Shouldn't the permissions line in the manifest.json file make this possible(Sofar I've had no luck)? I'll attempt to use a content script instead to force some css into the src url for the iframe. Hopefully that'll work. – Joshua Redfield Jan 15 '12 at 19:38
  • Oh and I forgot to mention, I'm really not trying to change the background -- I just want it to be transparent inside the iframe so it'll blend in better. – Joshua Redfield Jan 15 '12 at 19:48
  • I honestly don't know a whole lot about Chrome extensions, but based on this, it does appear that you can inject JavaScript and CSS once you include cross-domain permissions in your manifest.json: http://code.google.com/chrome/extensions/content_scripts.html#pi – Jake Stoeffler Jan 16 '12 at 03:49