Puis-je injecter un fichier CSS par programme en utilisant le fichier d'un script de contenu?

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

Question

Puis-je injecter un fichier CSS par programme en utilisant le fichier d'un script de contenu?

Il est possible pour moi d'injecter le css lorsque le fichier js est lié à mon popup.html. Le problème est que je dois cliquer sur le bouton pour ouvrir le menu contextuel pour injecter le css. Je veux que cela se produise automatiquement et en arrière-plan.

Qu'est-ce qui se passe dans mon code ...

  1. Obtenir une variable à partir d'une base de données MySQL via un XMLHttpRequest
  2. Appelez la fonction "ProcessData ()"
  3. « ProcessData » traitera les données du XMLHttpRequest. Plus précisément, diviser la variable, mettre en 2 différentes variables et les rendre globale
  4. J'appelle la fonction "cliquez sur ()"
  5. "cliquez sur" Ensuite, définira le css après 1250 millisecondes en utilisant setTimeout
  6. J'utilise chrome.tabs.insertCSS pour insérer le css. Le nom de la variable est css, " currenttheme "

Comme je l'ai mentionné avant qu'il fonctionne en utilisant le menu contextuel. Mais la fenêtre doit être ouvert avant le CSS s'injecté.

Comment puis-je faire tout cela arrive automatiquement, sans aucune intervention de l'utilisateur

Voici mon 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);
  }
});
Était-ce utile?

La solution

Vous pouvez créer par programme une nouvelle balise <link> et l'ajouter à la section <head> comme fichiers JS sont chargés dynamiquement. 

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

Voici un article sur le sujet.

Autres conseils

scintillement extension

A Trama à l'écosystème qui n'est pas difficile de fixer

Avant-propos:

Parmi les nombreuses façons d'obtenir votre css ajouté à une page, la plupart d'entre eux provoquent l'écran de scintillement - montrant d'abord la page sans votre css appliquée, puis à appliquer plus tard. J'ai essayé plusieurs façons, ci-dessous sont mes conclusions.

L'essentiel

Vous devez ajouter un <link> css ou une balise <style> dans un script de contenu injecté sur document_start

qui ressemble de code comme ceci: 

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

Pour un code css dynamique: 

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

Faire cela dans un script sur document_start de assure, il est pas de scintillement!

Le raisonnement

Dans ce fichier JavaScript vous pouvez gérer un certain nombre de choses programmatiques. La mise en correspondance de modèle d'URL offert dans manifest.json est très limité, mais ici vous pouvez réellement regarder tous les ?query_string et #hash d'une URL, et la pleine utilisation des expressions régulières et les opérations de chaîne pour décider si oui ou non à css inject. Ce peut également être css basée sur les paramètres et / ou coordonner avec des messages sur la page d'arrière-plan.

Parting mots

  • Ne pas utiliser .insertCSS, vous remarquerez un scintillement.

Il est à simple que vous pouvez ajouter au champ des autorisations du manifeste: Voir web_accessible_resources 

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

et ajouter ceci dans content_scripts 

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

vous ajoutez également même chose en utilisant l'injection et insertCSS () . 

chrome.tabs.insertCSS(integer tabId, object details, function callback)
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top