¿Puedo inyectar un archivo CSS mediante programación utilizando un archivo JS de script de contenido?

StackOverflow https://stackoverflow.com/questions/9345003

Pregunta

¿Puedo inyectar un archivo CSS mediante programación utilizando un archivo JS de script de contenido?

Es posible que inyecte el CSS cuando el archivo JS está vinculado 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. Quiero que suceda automáticamente y en segundo plano.

¿Qué pasa en mi código ...

  1. Obtenga una variable de una base de datos MySQL a través de una XMLHTTPREQUEST
  2. Llame a la función, "ProcessData ()"
  3. "ProcessData" procesará los datos de XMLHTTPRequest. Más específicamente, divida la variable, póngala en 2 variables diferentes y hazlas globales
  4. Yo llamo a la función, "haga clic ()"
  5. "Haga clic" luego establecerá el CSS después de 1250 milisegundos usando SetTimeOut
  6. Utilizo chrome.tabs.insertcss para insertar el CSS. El nombre de CSS es la variable ",CurrentTheme"

Como mencioné antes, funciona usando la ventana emergente. Pero la ventana emergente debe abrirse antes de inyectarse el CSS.

¿Cómo hago que todo esto suceda? automáticamente, sin ninguna interacción de 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);
  }
});
¿Fue útil?

Solución

Puede crear programáticamente un nuevo <link> etiqueta y agrégalo al <head> La sección al igual que los archivos JS se cargan dinámicamente.

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í es un artículo en el tema.

Otros consejos

Parpadeo de extensión

Un trama al ecosistema Eso no es difícil de arreglar

Prefacio:

Entre muchas formas de agregar su CSS a una página, la mayoría de ellas hacen que la pantalla parpadee, inicialmente mostrando la página sin su CSS aplicado, y luego la aplica. He probado varias maneras, a continuación se encuentran mis hallazgos.

La esencia

Necesitas agregar un CSS <link> o <style> etiqueta en un Script de contenido inyectado en document_start

Ese código se ve así:

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 algún código CSS dinámico:

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

Haciendo esto en un guión en document_start Asegura que haya ¡Sin parpadeo!

El razonamiento

En este archivo JavaScript, puede manejar cualquier cantidad de cosas programáticas. La coincidencia de patrones de URL ofrecida en manifest.json es muy limitado, pero aquí puedes ver todos los ?query_string y #hash de una URL, y use expresiones regulares completas y operaciones de cadena para decidir si inyectar o no CSS. Que CSS también puede basarse en la configuración y/o coordinar con mensajes en la página de fondo.

Palabras de separación

  • No lo usas .insertCSS, Notarás un parpadeo.

Es para simple que puedas agregar al campo de permisos del manifiesto: ver web_accessible_resources 

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

Y también agregue 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 agrega lo mismo usando inyección programática y insertcss ().

chrome.tabs.insertCSS(integer tabId, object details, function callback)
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top