web-dev-qa-db-fra.com

Injectez du HTML dans une page à partir d'un script de contenu

Je crée une extension Chrome et j'ai besoin de superposer un blob de html sur quelques sites Web. Pour le moment, j'utilise une JQuery .Get pour extraire le html de mon serveur. Afin d'améliorer les performances, je me demande s'il est possible d'inclure le html en tant que fichier dans le répertoire d'extension et d'accéder directement à la source à partir de là? Est-ce que quelqu'un sait si c'est possible?

[~ # ~] mise à jour [~ # ~]

La suggestion de Rob fait l'affaire (voir la réponse acceptée). La seule étape supplémentaire consiste à enregistrer le fichier dans le manifeste sous web_accessible_resources .

{
  ...
  "web_accessible_resources": [
    "myimportfile1.html",
    "myimportfile2.html"
  ],
  ...
}
google-chromegoogle-chrome-extension
32
QFDev

Oui, c'est possible. Utilisation chrome.extension.getURL pour obtenir une URL absolue pour la ressource. Par exemple:

Étape 1:

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

Étape 2:

Enregistrez la ressource dans le manifeste sous web_accessible_resources: Voir https://developer.chrome.com/extensions/manifest#web_accessible_resources (Fourni par @QFDev)

49
Rob W

Une autre façon de le faire est d'utiliser new Fetch API :

Si le nom du fichier est modal.html - mise à jour manifest.json en conséquence

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

et l'injecter comme ceci:

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

Voici mon approche:

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

Sans jQuery etc.

6
Kamil

J'utilise ce code. Il ne s'agit que de 3 lignes de code et vous n'avez pas besoin des ordures de jquery.

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

Si vous utilisez Angular dans votre Chrome, vous pouvez utiliser 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
WeNeigh