Как правильно реализовать вызов модального окна в расширении?

#javascript #html #chrome_extension #extension

У меня есть расширение, и мне нужно что бы по клику на кнопку на клавиатуре, допустим,
L вызывалось модальное окно с какой-то надписью(простой alert не подойдет, т.к. окно
нужно стилизовать). Но столкнулся с проблемой что не понимаю как именно это сделать:
то ли нужно отдельные файлы с html и css делать или просто по нажатию на кнопку просто
постоянно создавать html разметку с помощью  js. Кто уже работал с этим подскажите
как это происходит? Функция вызова окна находиться в content-script.js.
    

Ответы

Ответ 1

Наиболее правильным решением будет использовать Shadow DOM для создания модального окна. 

Это позводит изолировать встраеваемые стили от основного документа. 
Обратите внимание, что при обращении к созданному модальному окну необходимо использовать
shadowRoot вместо document. 

manifest.json

{
  "manifest_version": 2,
  "name": "Test",
  "version": "1.0",
  "description": "",
  "content_scripts": [{
    "matches": [""],
    "js": ["content-script.js"],
    "run_at": "document_start"
  }]
}


content-script.js



document.addEventListener('DOMContentLoaded', function() {

    // создаем хост элемент для Shadow DOM
    const div = document.createElement('div'); 

    // создаем shadow DOM 
    const shadowRoot = div.attachShadow({mode: 'open'});

    // создаем модальное окно в shadow DOM 
    shadowRoot.innerHTML = '
Modal
';

    // добавляем хост элемент в оригинальный DOM (document)
    document.body.appendChild(div);

    window.addEventListener('keydown', e => {
         if(e.keyCode === 76 ){ // "l" - key

            // показываем модальное окно
            // обратите внимание что здесь используется "shadowRoot"
            shadowRoot.querySelector('#modal_form').style.display = "block";
          }
    });
});