Как изолировать CSS в Сhrome extension?

Question

[strannik_k]

Делаю расширение для Google Chrome - всплывающее окно в центре страницы. Ранее расширения для хрома не разрабатывал. Расширение сделано на React.js. Всплывающее окно сделано с помощью компонента Dialog из material-ui.

Основная проблема - стили сайтов влияют на отображение элементов в расширении. Как от этого можно избавиться?
Вижу 3 возможные решения проблемы:
1) Shadow Dom. Пробовал создать элемент и в нем вызывать react render, а затем зарегистрировать данный элемент. Chrome выдал ошибку, что нельзя зарегистрировать элемент из расширения.
2) Использовать iframe. Вот только у меня React почему не рендерит внутри iframe.
3) Сбросить стили каким-нибудь reset.css.

Вторая проблема - пробовал добавить bootstrap в расширение, но его стили применяются также и к сайтам. Подключаю его так:

"content_scripts": [
       {
           "matches": ["<all_urls>"],
           "css": ["styles.css", "bootstrap.min.css"],
           "js": ["content.js"]
       }
   ],

Можно ли сделать так, чтобы bootstrap применялся только к элементам расширения?

Заранее спасибо за ответ!

Answer 1

[strannik_k]

Алексей Ярков: Пробовал сброс стилей, но это плохое решение. Остановился на решении с iframe. Изоляция работает.
У меня реакт не рендерил его, потому-что в функции render компонента, в который я поместил iframe, не был добавлен код для рендеринга детей - this.props.children.
Так вполне работает:

<iframe>
    <span>Text in Iframe</span>
</iframe>

Можно и так в компоненте писать:

<iframe src={chrome.extension.getURL('frame.html')} />

Для того, чтобы получить ссылку на файлы через chrome.extension.getURL(), нужно и в манифесте прописать

"web_accessible_resources": [
       "frame.html",
       "frame-styles.css"
   ]

Я воспользовался первым способом и этим компонентом - https://github.com/pqx/react-frame, чтобы задать ему css файл.