Chrome расширение: добавить HTML на веб-страницу

Question

Я видел этот ответ:

Chrome расширение: вставьте фиксированный div как UI

, который вставляет div в текущую веб-страницу.

Однако, делать это все время довольно утомительно:

                            "div.id = 'myDivId';" +
                            "div.style.position = 'fixed';" + 
                            "div.style.top = '50%';" +
                            "div.style.left = '50%';" +

Можно ли вместо этого вставить полностью сформированный шаблон HTML (то есть включить его в качестве шаблона. html в расширении)?

Answer 1

Существует несколько методов.

Предоставление ресурсов для сценария содержимого с помощью web_accessible_resources

Тогда сценарий содержимого может использовать их почти напрямую (используя * 1028). * .runtime.getURL ) в изображениях, видеороликах, фреймах или прочитайте содержимое файлов html, используя fetch() и XMLHttpRequest.

Если ваш пользовательский интерфейс сложный, тогда go с подходом iframe - его содержимое будет полноценной средой расширения, такой как всплывающее окно browser_action со своим собственным chrome: // расширением URL.

Недостатком является то, что ваши ресурсы могут быть прочитаны любым сайтом напрямую, и сайты могут легко обнаружить присутствие вашего расширения.

Использовать обмен сообщениями и читать ресурсы с помощью фонового скрипта

content . js:

chrome.runtime.sendMessage({cmd: 'getTemplate'}, html => {
  document.body.insertAdjacentHTML('beforeend', html);
});

background. js:

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.cmd === 'getTemplate') {
    fetch('/templates/foo.html').then(r => r.text()).then(sendResponse);
    return true;
  }
});

Использовать ваш компилятор / компоновщик

Существуют плагины для основных компоновщиков / компиляторов, которые позволяют встроить содержимое файла в другой файл, чтобы вы могли включить шаблон HTML в сценарий скомпилированного содержимого в виде буквенной строки.