Posso iniettare un file CSS a livello di programmazione utilizzando un file JS di script di contenuto?

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

Domanda

Posso iniettare un file CSS a livello di programmazione utilizzando un file JS di script di contenuto?

È possibile per me iniettare il CSS quando il file JS è collegato al mio popup.html. Il problema è che devo fare clic sul pulsante per aprire il popup per iniettare il CSS. Voglio che accada automaticamente e in background.

Cosa succede nel mio codice ...

  1. Ottieni una variabile da un database MySQL tramite un XMLHTTPREQUEST
  2. Chiama la funzione "ProcessData ()"
  3. "ProcessData" elaborerà i dati da XMLHTTPREQUEST. Più specificamente, dividi la variabile, mettila in 2 variabili diverse e rendile globali
  4. Chiamo la funzione "Click ()"
  5. "Fare clic" quindi imposterà il CSS dopo 1250 millisecondi utilizzando setTimeout
  6. Uso Chrome.tabs.insertcss per inserire il CSS. Il nome CSS è la variabile "CurrentTheme"

Come ho detto prima funziona usando il popup. Ma il popup deve essere aperto prima che il CSS venga iniettato.

Come faccio a far accadere tutto ciò automaticamente, senza alcuna interazione utente?

Ecco il mio codice:

    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);
  }
});
È stato utile?

Soluzione

È possibile creare a livello di programmazione un nuovo <link> tagga e aggiungilo al file <head> Sezione proprio come i file JS vengono caricati in modo dinamico.

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

Ecco un articolo sull'argomento.

Altri suggerimenti

Sfarfallio estensione

Un trama all'ecosistema Non è difficile da risolvere

Prefazione:

Tra i molti modi per ottenere il tuo CSS aggiunto a una pagina, la maggior parte di essi fa tremolare lo schermo, mostrando inizialmente la pagina senza applicare il tuo CSS e poi applicarlo. Ho provato diversi modi, di seguito sono le mie scoperte.

L'essenza

Devi aggiungere un CSS <link> o a <style> tag in a Script di contenuto iniettato document_start

Quel codice sembra questo:

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

Per un codice CSS dinamico:

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

Facendo questo in una sceneggiatura su document_start assicura che ci sia Nessun sfarfallio!

Il ragionamento

In questo file JavaScript è possibile gestire qualsiasi numero di cose programmatiche. La corrispondenza del modello URL offerto manifest.json è molto limitato, ma qui puoi effettivamente guardare tutto il ?query_string e #hash di un URL e utilizzare espressioni complete regolari e operazioni di stringa per decidere se iniettare o meno CSS. Che CSS può anche essere basato su impostazioni e/o coordinarsi con la messaggistica alla pagina di fondo.

Parole di separazione

  • Non usare .insertCSS, noterai uno sfarfallio.

È semplice che potresti aggiungere al campo delle autorizzazioni del manifest: vedi web_accessible_resources 

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

E aggiungi anche questo in content_scripts

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

Aggiungi anche la stessa cosa usando l'iniezione programmatica e insertcss ().

chrome.tabs.insertCSS(integer tabId, object details, function callback)
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top