Я пишу расширение Chrome, которое добавляет div "console" поверх любой страницы, что позволяет пользователю видеть "meta" информацию о странице. В этом случае расширение отображает информацию о китайских иероглифах, над которыми пользователь наводит курсор.
Основы плагина в том, что он вставляет div на страницу и затем отображает приложение реагирования на этот div. Приложение расширения - это желтая полоса справа:
Я хотел бы использовать какой-то CSS каркас внутри моего приложения расширения, в идеале Bootstrap через React- Bootstrap. Однако, когда я добавляю библиотеку в свое приложение реакции через import 'bootstrap/dist/css/bootstrap.min.css', css влияет на всю веб-страницу, а не только на мое приложение. По понятным причинам это плохо, так как CSS влияет на каждую страницу, которую посещает пользователь.
Итак, мой вопрос, есть ли способ для меня использовать CSS framework (bootstrap) таким образом, что это повлияет только на мое реагирующее приложение? Какой-то способ расширить его или перестроить?
Например, вот так выглядит NPM домашняя страница с этим CSS в расширении. Это полностью искажено:
И без него:
