Как избежать конфликта стилей CSS расширения Google Chrome и CSS страниц?

Имеем расширение Google Chrome в котором используется Bootstrap и скрипт для создания модальных окон arctic-modals. В итоге на некоторых сайтах неверно отображаются формы расширения. Полагаю что это из-за конфликта CSS стилей, которые нужно инжектить на страницу, чтобы формы выводились через content.js. Есть ли способ избежать этого?

Ответ

Попробуйте как-то так: скомпилируйте ваши css-файлы, например, с помощью less с уникальным префиксом:
my_chrome_app.less
.my-chrome-app { @import (less) url("bootstrap.css"); }
В результате получится файл, в котором все классы бутстрэпа обёрнуты в родителя .my_chrome_app
my_chrome_app.css
... .my_chrome_app .lead { font-size: 21px; } ...
А в генерируемых формах весь код нужно обернуть в нужный div.

Текст с нашими стилями bootstrap

Тогда стили из ваших css-файлов будут применяться только к вашим формам. Однако, стили страниц всё равно будут влиять на отображение ваших форм, хотя и будут иметь более низкий приоритет.
Про less: на английском, на русском