Vkladajte HTML na stránku zo skriptu obsahu - google-chrome, google-chrome-extension

Budujem rozšírenie pre Chrome a mám požiadavku prekryť blob html na pár webových stránok. Momentálne používam JQuery .Get vytiahnuť html z môjho servera. V záujme zvýšenia výkonu by ma zaujímalo, či je možné zahrnúť html ako súbor do adresára s príponou a odtiaľ priamo pristupovať k zdroju? Vie niekto, či je to možné?

UPDATE

Robov návrh urobí prácu (pozri prijatú odpoveď). Jediným ďalším krokom je registrácia súboru v manifeste pod web_accessible_resources.

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

odpovede:

41 pre odpoveď č. 1

Áno, je to možné. Použite chrome.extension.getURL získať absolútnu adresu URL zdroja. Napríklad:

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:

Zaregistrujte zdroj v manifeste pod web_accessible_resources: Viď https://developer.chrome.com/extensions/manifest#web_accessible_resources (Poskytuje @QFDev)

---

6 pre odpoveď č. 2

Toto je môj prístup:

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 atď.

---

2 pre odpoveď č. 3

Ďalším spôsobom, ako to urobiť, je použiť nový Načítať rozhranie API:

Ak je názov súboru modal.html - aktualizácia manifest.json teda

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

a vstreknite to takto:

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

---

1 pre odpoveď č. 4

Ak vo svojom rozšírení pre Chrome používate Angular, môžete využiť 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);

---

1 pre odpoveď č. 5

Používam tento kód. Sú to iba 3 riadky kódu a nepotrebujete žiadne odpadky jquery.

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

---