Внедрить HTML в страницу из содержимого script

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

UPDATE

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

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

Ответ 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#web_accessible_resources (предоставлено @QFDev)

Ответ 2

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

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 и т.д.

Ответ 3

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

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

Ответ 4

Если вы используете 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);