javascript - tablas - ¿Puedo inyectar un archivo CSS mediante programación utilizando un archivo de script de contenido js?

script javascript html

Question

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

Es posible que yo 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 el fondo.

Lo que pasa en mi código ...

1. Obtenga una variable de una base de datos MySQL a través de un 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 hágala global
4. Llamo a la función, "click ()"
5. "haga clic" Luego establecerá el css después de 1250 milisegundos usando setTimeout
6. Yo uso chrome.tabs.insertCSS para insertar el css. El nombre css es la variable, " currenttheme "

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

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

Answer 1

Parpadeo de extensión

Un drama al ecosistema que no es difícil de arreglar.

Prefacio:

Entre las muchas formas de agregar su css a una página, la mayoría de ellas hace que la pantalla parpadee; inicialmente muestra la página sin su css aplicado, y luego la aplica. He intentado varias maneras, a continuación son mis conclusiones.

La esencia

Debe agregar una etiqueta css <link> o <style> 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); 

¡Hacer esto en un script en document_start asegura que no haya parpadeo!

El razonamiento

En este archivo JavaScript puede manejar cualquier cantidad de cosas programáticas. La coincidencia de patrones de URL que se ofrece en manifest.json es muy limitada, pero aquí puede ver toda la ?query_string y el #hash de una url, y usar expresiones regulares completas y operaciones de cadena para decidir si inyectar o no css. Ese css también puede basarse en la configuración y / o coordinarse con los mensajes a la página de fondo.

Palabras de despedida

• No utilice .insertCSS , notará un parpadeo.

Answer 2

Es muy simple que podría agregar al campo de permisos del manifiesto: 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 agrega lo mismo usando la inyección programática e insertCSS() .

chrome.tabs.insertCSS(integer tabId, object details, function callback)

Answer 3

Puede crear mediante programación una nueva etiqueta <link> y agregarla a la sección <head> 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í hay un artículo sobre el tema.