google-chrome - manager - tag assistant chrome

Inyectar HTML en una página desde un script de contenido

Question

Estoy construyendo una extensión de Chrome y tengo un requisito para superponer una burbuja de html en la parte superior de algunos sitios web. Por el momento estoy usando un JQuery .Get Para extraer el html de mi servidor. Para mejorar el rendimiento, me pregunto si es posible incluir el html como un archivo en el directorio de extensión y acceder a la fuente directamente desde allí. ¿Alguien sabe si esto es posible?

ACTUALIZAR

La sugerencia de Rob hace el trabajo (ver respuesta aceptada). El único paso adicional es registrar el archivo en el manifiesto en web_accessible_resources .

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

Answer 1

Este es mi enfoque:

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

Sin jQuery, etc.

Answer 2

Otra forma de hacerlo es usar la nueva Fetch API :

Si el nombre del archivo es modal.html - actualice manifest.json consecuencia

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

e inyectarlo así:

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

Answer 3

Sí, eso es posible Use chrome.extension.getURL para obtener una URL absoluta para el recurso. Por ejemplo:

Paso 1:

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

Paso 2:

Registre el recurso en el manifiesto en web_accessible_resources: consulte https://developer.chrome.com/extensions/manifest#web_accessible_resources (proporcionado por @QFDev)

Answer 4

Si usa Angular en su extensión de Chrome, puede utilizar 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 5

Yo uso este código Son solo 3 líneas de código y no necesitas basura de jquery.

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