How to isolate dynamically injected element style in content script?

[cyberjj999]

Currently, I am able to successfully inject IFrame element into the webpage.
(The way it works is that I'll dynamically create a div element as the iframe container, then I'll read my iframe.html file, and document.write the content into a dynamically created <iframe> element, and append that as the child of the div element).

• I have a few headers, footers, navbar etc. in my IFrame element, and I can use vanilla css to style them.
• It's great because the styling of my iframe.html will not be affected by the webpage's css, and i can apply my own styling.

However, now I also struggle with making use of external javascript and css libraries  inside my iframe because i kept getting the violates Content Security Policy error when i reference js inside my iframe.html

Any help would be sincerely appreciated!

[cyberjj999]

Edit:

- The reason I am struggling is that now I wanted to use additional libraries like bootstrap, and maybe even jquery — because i need a better datepicker than the one provided in vanilla HTML!

- So I need to fix this import issue!

[wOxxOm]

See this topic for more info on how to use an iframe properly or ShadowDOM to isolate styles:

https://stackoverflow.com/questions/12783217/

[cyberjj999]

Hi. Thanks for your reply. I have actually referenced this StackOverflow page, as well as a few others.

The user in the page above (anderspitman) actually made a few good points. 

I would like to summarize my issue to provide my context

• iFrame is a suitable choice for me because I needed my iFrames to interact with the webpage elements in my content script. (This is harder/impossible to achieve with Shadow DOM).
• Also, there are 2 ways I can use iFrame in my context — both require me to create a iframeContainer div, then an <iframe> element of course.
  • Approach 1: I could specify the actual my_iframe.html file through the iframe.src attribute (i.e. iframe.src = my_iframe.html)
  • Approach 2: OR, I could use iframe.contentDocument.write(<all my HTML content will be here>)
• The reason why I picked Approach 2 over Approach 1 is that I won't be able to access my iFrame elements (and delete/update them) if I used Approach 1. This is because if I use iframe.src, my dynamically generated iFrame would be in a diff origin as compared to my content script — thus I cannot access its element.
• Approach 2 allows me to basically directly write all my HTML (and CSS) into the iframe, BUT, I couldn't find a way to include javascript libraries inside the iframe, such as jQuery. Because any reference to external js file (i.e. script src="myfile.js") throws the same error I showed in the attached image.

To be clear, I need to achieve a couple functionalities

• I used iframes to isolate my dynamically generated elements from the page's style to prevent it from breaking
• My dynamically generated elements need to be able to interact with chrome apis (i.e. I could generate a button, and maybe onclick that button will get the website's cookie using chrome.cookie API etc.)
• I need to use javascript libraries (such as jQuery) IN MY IFRAMES  because the default datepicker is not ideal for my use case.

Currently, using iframes and also iframe.contentDocument.write, I could achieve the first two functionalties. However, the third one seem to be a huge problem for me to surmount.

I really hope this is clear and I'd sincerely appreciate any advice!! Thank you so much.

[wOxxOm]

You'll have to use the first approach + messaging or URL parameters after `?` in the iframe's src. Your iframe.html will load iframe.js which will modify the iframe's DOM as necessary. To prevent the page from seeing the URL you can add the iframe inside a closed-mode shadow DOM.