0

I do an extension with popup window in the center of a page.
I use ReactJS.

The main problem: a website styles affect to display of elements in the extension.
How I can fix it?

I see the following possible solutions:
1) Use 'all' property

.my-extension-name * {  
    all: initial;  
}

2) Use iFrame. But I have a problem: react do not render to iframe in my code.

sserg
  • 3
  • 3
  • 1
    Use iframe you should be able to do it. – Joy Sep 02 '16 at 14:02
  • 1
    For the iframe and React you'll need to declare and inject all its scripts as per [web_accessible_resources docs](https://developer.chrome.com/extensions/manifest/web_accessible_resources). The documentation doesn't have examples but you can find them by googing. There might be even a similar/duplicate question on StackOverflow but I didn't do this stuff myself so I'm just commenting. – wOxxOm Sep 02 '16 at 14:08
  • [Shadow DOM](https://developers.google.com/web/fundamentals/primers/shadowdom) and [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) – Daniel Herr Sep 02 '16 at 17:42
  • 2
    Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](http://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) – Haibara Ai Sep 03 '16 at 01:32
  • Thank you all for your answers! Iframe solution is works. React did not render to iframe because was missed this.props.children in my code. I use https://github.com/pqx/react-frame and web_accessible_resources for inject css files. – sserg Sep 04 '16 at 11:59

0 Answers0