Wpisywanie kodu HTML do strony ze skryptu treści

Question

Buduję rozszerzenie przeglądarki Chrome i muszę umieścić nakładkę html na kilku stronach internetowych. W tej chwili używam JQuery .Get do wyciągnięcia html z mojego serwera. W celu poprawy wydajności zastanawiam się, czy możliwe jest dołączenie html jako pliku do katalogu rozszerzenia i bezpośredni dostęp do źródła? Czy ktoś wie, czy to jest możliwe?

UPDATE

sugestia Roba spełnia swoje zadanie (patrz odpowiedź zaakceptowane). Jedynym dodatkowym krokiem jest zarejestrowanie pliku w manifeście pod numerem web_accessible_resources.

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

Answer 1

Tak, to możliwe. Użyj chrome.extension.getURL, aby uzyskać bezwzględny URL dla zasobu. Na przykład:

Krok 1:

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

Krok 2:

Zarejestruj zasobu w manifeście pod web_accessible_resources: Zobacz https://developer.chrome.com/extensions/manifest#web_accessible_resources (Zapewnione przez @QFDev)

Answer 2

To jest moje podejście:

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); 

Bez jQuery itp.

Answer 3

Jeśli używasz kątowa w rozszerzeniu Chrome, można skorzystać z 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); 

Answer 4

używam tego kodu. To tylko 3 linie kodu i nie potrzebujesz żadnych śmieci jQuery.

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

Answer 5

Innym ze sposobów jest użycie nowego Fetch API:

Jeśli nazwa pliku jest modal.html - aktualizacja manifest.json odpowiednio

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

i wstrzyknąć go tak:

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 
    });