Запуск модальности начальной загрузки на веб-странице с помощью скрипта содержимого расширения Chrome (без путаницы на странице CSS) - PullRequest
Новая
       5

Запуск модальности начальной загрузки на веб-странице с помощью скрипта содержимого расширения Chrome (без путаницы на странице CSS)

0 голосов
/ 24 ноября 2018

Какой рекомендуемый способ открыть модал начальной загрузки из скрипта контента?Мне известно, что файлы CSS и JS могут быть введены на страницу декларативно через манифест и программно.Однако меня беспокоит, что внедренные CSS-файлы (в данном случае bootstrap.min.css) могут конфликтовать с CSS веб-страницы.

Какой наилучший подход для решения этой проблемы?

1 Ответ

0 голосов
/ 24 ноября 2018

Вы можете добиться желаемой изоляции, используя Shadow DOM .Shadow DOM в основном позволяет вам создавать изолированные DOM в контексте существующей веб-страницы.Весь CSS ограничен локально, и корень DOM считается корневым элементом Shadow DOM, в отличие от истинного корня страницы.Вы можете внедрить скрипт содержимого, который выполняет следующие действия:

  1. Создает теневой корень.
  2. Добавляет тег ссылки, ссылающийся на ваш Bootstrap CSS.
  3. Создает необходимый HTML-коддля модального и добавляет его к теневому корню.
  4. Открывает модальное.

Ваш скрипт контента по-прежнему будет иметь регулярный доступ к полному контексту окна, если вам потребуется информациясо страницы.

Вот пример (полностью непроверенный) пример кода для вашего скрипта содержимого, чтобы проиллюстрировать: 

const shadowWrapper = document.createElement('div');
shadowWrapper.setAttribute('style', `
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
`);
const shadowRoot = shadowWrapper.attachShadow({ mode: 'open' });
const bootstrapStyle = document.createElement('link');
bootstrapStyle.setAttribute('rel', 'stylesheet');
bootstrapStyle.setAttribute('src', 'bootstrap.min.css');
shadowRoot.appendChild(bootstrapStyle);

const modal = document.createElement('div');
modal.id = "myModal";
shadowRoot.appendChild(modal);
// Whatever you need to do to create your modal...
$("#myModal").modal();

Обратите внимание, что это жизнеспособное решение, только если вы хотите выпустить это расширение.в Chrome - Shadow DOM пока не имеет большой поддержки в других браузерах (https://caniuse.com/#search=shadow%20dom).

...