Puedo inyectar un archivo CSS mediante programación con un contenido de secuencia de comandos de archivo js?

Es posible para mí para inyectar el css cuando el archivo js está ligada a mi popup.html. El problema es que tengo que hacer clic en el botón para abrir la ventana emergente para inyectar el css. Yo quiero que ocurra de forma automática y en segundo plano.

Lo que sucede en mi código…

  1. Obtener una variable a partir de una base de datos MySQL a través de un XMLHttpRequest
  2. Llamar a la función, «processdata()»
  3. «processdata» tratará los datos de la XMLHttpRequest. Más concretamente, la división de la variable, ponerlo en 2 diferentes variables y hacerlos global
  4. Yo llame a la función», haga clic en()»
  5. «clic», a Continuación, establecer el css después de 1250 milisegundos usar setTimeout
  6. Yo uso chrome.las pestañas.insertCSS para insertar el css. El css es el nombre de la variable, «currenttheme«

Como he mencionado antes que hace el trabajo, el uso de la ventana emergente. Pero la ventana emergente que se abre antes de que el CSS se inyecta.

¿Cómo puedo hacer que todo esto suceda automáticamente, sin ninguna interacción del usuario?

Aquí está mi código:

    function getData() {
if (window.XMLHttpRequest)
      {//code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {//code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        user_data = xmlhttp.responseText;
        window.user_data = user_data;
        processdata();
        }
      }
    xmlhttp.open("GET","http://localhost:8888/g_dta.php",true);
    xmlhttp.send();
}

getData();

function processdata() {
  var downdata = user_data.split('|||||');
  var installedthemes = downdata[0];
  var currenttheme = downdata[1].toString();
  window.currenttheme = currenttheme;
  click();
  }

function click(e) { 
      function setCSS() {
          chrome.tabs.insertCSS(null, {file:currenttheme + ".css"});
          }
      setTimeout(function(){setCSS()}, 1250);
      document.getElementById('iFrameLocation').innerHTML = "<iframe src='http://localhost:8888/wr_dta.php?newid="+e.target.id+"'></iframe>";
      getData();
}

document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});
InformationsquelleAutor Jacques Blom | 2012-02-18

3 Comentarios

  1. 60

    Puede crear mediante programación un nuevo <link> etiqueta y agregar a la <head> sección como JS archivos se cargan de forma dinámica.

    var link = document.createElement("link");
    link.href = "http://example.com/mystyle.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    document.getElementsByTagName("head")[0].appendChild(link);

    Aquí un artículo sobre el tema.

    • tengo la impresión de que lo hizo tan fácil…como hacer una respuesta con un ref sin mucho esfuerzo. buenas respuestas llegan con facilidad a los expertos…
    • Gracias Cris. Yo sabía que el código para agregar una etiqueta de secuencia de comandos de forma dinámica y pensé que probablemente era el mismo para un archivo CSS. Hice una búsqueda en Google para confirmar y, a continuación, que escribió la respuesta.
    • Gracias, pero no pude conseguir que esto funcione. 🙁
    • A mí me funciona. Buen método para probar la CSS externa en una única página
  2. 7

    Extensión de parpadeo

    Una trama para el ecosistema que no es difícil de solucionar

    Prefacio:

    Entre muchas formas para conseguir tu css en una página, la mayoría de ellos causa que la pantalla parpadee – inicialmente se muestra la página sin tu css aplicado, y luego aplicarlo. He intentado de varias maneras, a continuación son mis conclusiones.

    La esencia

    Necesita añadir un css <link> o un <style> etiqueta en un El contenido del script inyectado en document_start

    Que el código que se parece a esto:

    var link = document.createElement('link');
    link.href =  chrome.runtime.getURL('main.css');
      //chrome-extension://<extension id>/main.css
    link.rel = 'stylesheet';
    document.documentElement.insertBefore(link);

    Para algunos dinámica de código css:

    var customStyles = document.createElement('style'); 
    customStyles.appendChild(document.createTextNode(
       'body { background-color: ' + localStorage.getItem('background-color') + '}'
    ));
    document.documentElement.insertBefore(customStyles); 

    Hacer esto en una secuencia de comandos en document_start asegura que hay ningún parpadeo!

    El razonamiento

    En este archivo JavaScript que puede manejar cualquier número de programación cosas. La dirección URL de coincidencia de patrón ofrecidos en manifest.json es muy limitado, pero aquí usted puede mirar en realidad todos los ?query_string y #hash de una url, y el uso completo de las expresiones regulares y las operaciones de cadena para decidir si o no para inyectar css. Css también puede estar basado en la configuración y/o coordinar con mensajes para el fondo de la página.

    Palabras de despedida de

    • No uso .insertCSS, te darás cuenta de un parpadeo.
  3. 0

    Es simple, se podría agregar a la del manifiesto de los permisos de campo : Ver web_accessible_resources

     , "web_accessible_resources": [
            "mystyle.css"
        ]

    y también agregar esto en content_scripts

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": ["mystyle.css"],
            "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
        }],

    también se añade lo mismo el uso Programático de la inyección y insertCSS().

    chrome.tabs.insertCSS(integer tabId, object details, function callback)
    • En este trabajo origen de la cruz?
    • En mi fin está funcionando. @MattParkins

Dejar respuesta

Please enter your comment!
Please enter your name here