Soru İçerik komut dosyasından HTML'yi bir sayfaya enjekte etme


Bir Chrome Uzantısı oluşturuyorum ve birkaç web sitesinin üzerine bir html bloğunu yerleştirme ihtiyacım var. Şu anda bir JQuery kullanıyorum .Get html'yi sunucumdan çekmek için. 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ÜNCELLEŞTİRME

Rob'un önerisi işi yapar (kabul edilen cevaba bakınız). Tek ek adım, dosyayı manifest altında kaydetmektir. web_accessible_resources.

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

25
2018-05-02 09:00


Menşei




Cevaplar:


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

Aşama 1:

$.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:

Kaynağı, web_accessible_resources altındaki bildirime kaydedin: Bkz. https://developer.chrome.com/extensions/manifest#web_accessible_resources (@QFDev tarafından sağlanmıştır)


42
2018-05-02 10:45



Mükemmel çalışıyor, teşekkürler! Tek ek adım, kaynağın web_accessible_resources altındaki bildirime kaydedilmesidir: developer.chrome.com/extensions/... - QFDev
@QFDev, bu kodu nereye koyarsınız? - Chamnap
Benim durumumda @Chamnap İçerik kodumda bu kodu kullandım. - QFDev
@QFDev, Teşekkürler. - Chamnap
@Vidit JS'yi içerik komut dosyasına koyun. Gerekmiyorsa, web sayfasındaki komut dosyalarını enjekte etmekten kaçınmalısınız. - Rob W


Bu benim yaklaşımım:

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


6
2018-03-25 13:09



Chrome Tarayıcı ana iş parçacığı üzerinde XMLHttpRequest () kullanımını onaylamış gibi görünüyor. Bu kodu, browserAction.click yöntemi için bu kodu kabul ettiğimde alıyorum: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. - baskint
son parametresini değiştir .open() için true ve eşzamansız olacak - Kamil
Eşzamansız hale getirmek için, son param .open() için true ve son üç kod satırını xmlHttp.onload = function () { ... } - richardkmiller


Bunu yapmanın başka bir yolu yeni kullanmaktır Getirme API'sı:

Dosyanın adı ise modal.html - güncelleme manifest.json göre

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

ve bunu şöyle enjekte edin:

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

2
2018-01-22 09:36



Bu önemli manifest.json için teşekkürler! Hata mesajları yalnızca durum koduyla getirme hatası vermez (0) - baszak


Chrome uzantınızda Angular kullanıyorsanız, aşağıdakilerden yararlanabilirsiniz: 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
2018-04-22 06:14





Bu kodu kullanıyorum. 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);

1
2018-04-17 18:46