Внедрить HTML в страницу из скрипта контента

Question

Я создаю расширение Chrome, и у меня есть требование наложить каплю html поверх нескольких веб-сайтов. На данный момент я использую JQuery .Get вытащить HTML с моего сервера. Для повышения производительности мне интересно, можно ли включить html как файл в каталог расширений и получить доступ к источнику напрямую оттуда? Кто-нибудь знает возможно ли это?

ОБНОВИТЬ

Предложение Роба делает работу (см. Принятый ответ). Единственным дополнительным шагом является регистрация файла в манифесте в web_accessible_resources.

{
  ...
  "web_accessible_resources": [
    "myimportfile1.html",
    "myimportfile2.html"
  ],
  ...
}

Answer 1

Да, это возможно использование chrome.extension.getURL получить абсолютный URL для ресурса. Например:

Шаг 1:

$.get(chrome.extension.getURL('/template.html'), function(data) {
    $(data).appendTo('body');
    // Or if you're using jQuery 1.8+:
    // $($.parseHTML(data)).appendTo('body');
});

Шаг 2:

Зарегистрируйте ресурс в манифесте в web_accessible_resources: см. https://developer.chrome.com/extensions/manifest (Предоставлено @QFDev)

Answer 2

Еще один способ сделать это - использовать новый Fetch API:

Если имя файла modal.html - Обновить manifest.json соответственно

"web_accessible_resources": [
    "modal.html",
],

и введите его так:

fetch(chrome.extension.getURL('/modal.html'))
    .then(response => response.text())
    .then(data => {
        document.body.innerHTML += data;
        // other code
        // eg update injected elements,
        // add event listeners or logic to connect to other parts of the app
    }).catch(err => {
        // handle error
    });

Answer 3

Я использую этот код. Это всего лишь 3 строки кода, и вам не нужен мусор jquery.

var iframe  = document.createElement ('iframe');
iframe.src  = chrome.extension.getURL ('iframe.html');
document.body.appendChild (iframe);

Answer 4

Это мой подход:

var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", chrome.extension.getURL ("src/inject/inject.html"), false );
xmlHttp.send( null );

var inject  = document.createElement("div");
inject.innerHTML = xmlHttp.responseText
document.body.insertBefore (inject, document.body.firstChild);

Без jQuery и т. Д.

Answer 5

Если вы используете Angular в расширении Chrome, вы можете использовать ng-include

var injectedContent = document.createElement("div");
injectedContent.setAttribute("ng-include", "");
//ng-include src value must be wrapped in single quotes
injectedContent.setAttribute("src", "'" + chrome.extension.getURL("template.html") + "'");
existingElement.appendChild(injectedContent);