webentwicklung-frage-antwort-db.com.de

Kann ich eine CSS-Datei programmgesteuert mit einer js-Datei mit Inhaltsskript einfügen?

Kann ich eine CSS-Datei programmgesteuert mit einer js-Datei mit Inhaltsskript einfügen?

Es ist mir möglich, die CSS einzuspeisen, wenn die JS-Datei mit meiner popup.html verknüpft ist. Das Problem ist, dass ich auf die Schaltfläche klicken muss, um das Popup zu öffnen, um die CSS einzuspritzen. Ich möchte, dass es automatisch und im Hintergrund geschieht.

Was passiert in meinem Code ...

  1. Rufen Sie eine Variable aus einer MySQL-Datenbank über XMLHttpRequest ab
  2. Rufen Sie die Funktion "processdata ()" auf
  3. "processdata" Verarbeitet die Daten von XMLHttpRequest. Genauer gesagt, teilen Sie die Variable auf, setzen Sie sie in 2 verschiedene Variablen und machen Sie sie global
  4. Ich rufe die Funktion "click ()" auf
  5. "click" Dann wird die css mit setTimeout nach 1250 Millisekunden gesetzt
  6. Ich benutze chrome.tabs.insertCSS, um die css einzufügen. Der CSS-Name ist die Variable " currenttheme "

Wie ich bereits erwähnt habe, funktioniert es mit dem Popup. Das Popup muss jedoch geöffnet werden, bevor das CSS injiziert wird.

Wie mache ich das alles? automatisch, ohne Benutzerinteraktion ?

Hier ist mein Code:

    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);
  }
});
19
Jacques Blom

Sie können programmgesteuert ein neues <link>-Tag erstellen und es dem Abschnitt <head> hinzufügen, so wie JS-Dateien dynamisch geladen werden.

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

Hier ist ein Artikel zum Thema.

57
jfriend00

Erweiterungsflimmern

Ein Trama für das Ökosystem das nicht schwer zu reparieren ist

Vorwort:

Neben vielen Möglichkeiten, Ihre CSS einer Seite hinzuzufügen, flackern die meisten von ihnen auf dem Bildschirm - zunächst wird die Seite ohne angewendete CSS angezeigt und später angewendet. Ich habe mehrere Möglichkeiten ausprobiert, hier sind meine Ergebnisse.

Der Gist

Sie müssen ein css <link> oder ein <style>-Tag in einem Content-Skript anfügen, das in document_start injiziert wurde.

Dieser Code sieht folgendermaßen aus:

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

Für etwas dynamischen CSS-Code:

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

Wenn Sie dies in einem Skript für document_start tun, wird sichergestellt, dass kein Flimmern auftritt!

Die Begründung

In dieser JavaScript-Datei können Sie mit einer beliebigen Anzahl von programmatischen Dingen arbeiten. Der in manifest.json angebotene URL-Musterabgleich ist sehr begrenzt, aber hier können Sie tatsächlich alle ?query_string- und #hash-Werte einer URL betrachten und vollständige reguläre Ausdrücke und Zeichenfolgenoperationen verwenden, um zu entscheiden, ob css eingefügt werden soll oder nicht. Dieses CSS kann auch auf Einstellungen basieren und/oder mit der Hintergrundnachrichten koordinieren.

Trennwörter

  • Verwenden Sie nicht .insertCSS, Sie werden ein Flimmern feststellen.
7
Devin G Rhode

Es ist zu einfach, Sie könnten das Berechtigungsfeld des Manifests hinzufügen: Siehe web_accessible_resources

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

und füge dies auch in content_scripts hinzu

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

sie fügen dasselbe auch mit Programmatic Injection und insertCSS () hinzu.

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