Bir içerik komut dosyasından HTML'yi sayfaya dönüştürün

Question

Bir Chrome Uzantısı yapıyorum ve birkaç web sitesinin üst kısmında bir html bloğunun üst üste bindirilmesine ihtiyacım var. Şu anda html sunucumdan çekmek için JQuery .Get kullanıyorum. Performansı arttırmak için, uzantı dizininde html dosyasını bir dosya olarak eklemek ve kaynaklara doğrudan buradan erişmek mümkün mü diye merak ediyorum. Bunun mümkün olup olmadığını bilen var mı?

GÜNCELLEME

Rob öneri işini (Kabul cevabı bakınız) yapar. Tek ek adım, dosyayı manifestoda web_accessible_resources altında kaydetmektir.

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

Answer 1

Evet, bu mümkün. Kaynak için mutlak bir URL almak için chrome.extension.getURL kullanın.

: 1. Adım:

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

Adım 2:

web_accessible_resources altında Manifest'inizde kaynak Kayıt: Örneğin https://developer.chrome.com/extensions/manifest#web_accessible_resources Bkz

Answer 2

Bu benim yaklaşımdır (@QFDev tarafından sağlanmıştır):

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 vb olmadan

Answer 3

Chrome uzantısındaki Açısal kullanıyorsanız, ben bu kodu kullanın 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

yararlanabilirler. Sadece 3 satır kod var ve jquery'nin çöpüne ihtiyacınız yok.

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

Answer 5

yeni Fetch API kullanmaktır yapmanın bir başka yolu: Dosyanın adı modal.html ise

- güncelleme böyle manifest.json buna göre

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

ve enjekte:

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