Geek Answers Handbook

How can I embed CSS and Javascript in an iframe loaded in a chrome extension

I have an iframe in my chrome extension that loads the website, I would like to add CSS and Javascript to the website, but only when it is loaded into my iframe extensions (so that it does not get affected when the user browses the website normally) .

I was surprised that Chrome extensions have cross-domain security policies applied to them when they try to access internal iframes even if they can execute cross-domain XHR requests.

Is there an easy way to do this? Although I could do it with executeScript, this requires a tab identifier.

+7
source share
1 answer

The only way to find out if you are in ifrmae is with window not top .

 if (window == top) { // Not in iframe } else { // In an iframe }

You can only do this for content scripts, not for style sheets. I usually do this in the contents of the script, I check to see if it is in the top window, and then continue the script, otherwise I will just end it.

Summary

  • Paste Script content for this URL
  • In the contents of the script, check if the property is window, if (window != top) { loadContentScript() }
  • Create CSS in JavaScript if you are too worried about this. You should not if using unique identifiers.

Hope this helps, I am doing this for several extensions.

+2
source

More articles:


All Articles