web-dev-qa-db-fra.com

Puis-je injecter un fichier CSS par programme en utilisant un fichier js de script de contenu?

Puis-je injecter un fichier CSS par programme en utilisant un fichier js de script de contenu?

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

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

  1. Obtenir une variable d'une base de données MySQL via XMLHttpRequest
  2. Appelez la fonction "processdata ()"
  3. "processdata" Traitera les données de XMLHttpRequest. Plus spécifiquement, divisez la variable, mettez-la en 2 variables différentes et rendez-les globales
  4. J'appelle la fonction, "click ()"
  5. "click" Ensuite, le css sera défini après 1250 millisecondes avec setTimeout
  6. J'utilise chrome.tabs.insertCSS pour insérer le css. Le nom css est la variable " currenttheme "

Comme je l'ai mentionné précédemment, cela fonctionne en utilisant le popup. Mais le popup doit être ouvert avant que le CSS ne soit injecté.

Comment est-ce que je fais tout ceci automatiquement, sans aucune interaction 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);
  }
});
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
19
Jacques Blom

Vous pouvez créer par programme une nouvelle balise <link> et l'ajouter à la section <head>, tout comme les fichiers JS sont chargés de manière dynamique.

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.

57
jfriend00

Extension scintille

Un trama à l'écosystème qui n'est pas difficile à réparer

Préface:

Parmi les nombreuses façons d’obtenir vos fichiers CSS ajoutés à une page, la plupart d’entre elles font clignoter l’écran - en affichant initialement la page sans votre fichier CSS, puis en l’appliquant ultérieurement. J'ai essayé de plusieurs façons, voici mes conclusions.

L'essentiel

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

Ce code ressemble à 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 du 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 garantit qu'il n'y a pas de scintillement!

Le raisonnement

Dans ce fichier JavaScript, vous pouvez gérer n’importe quel nombre de choses programmatiques. La correspondance de modèle d'URL proposée dans manifest.json est très limitée, mais vous pouvez ici consulter tous les ?query_string et #hash d'une URL et utiliser des expressions régulières complètes et des opérations sur des chaînes pour décider d'injecter ou non des fichiers CSS. Ce css peut également être basé sur les paramètres et/ou coordonner les messages avec la page d’arrière-plan.

Mots d'adieu

  • N'utilisez pas .insertCSS, vous remarquerez un scintillement.
7
Devin G Rhode

C'est très simple, vous pouvez ajouter au champ des autorisations du manifeste: Voir web_accessible_resources

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

et aussi 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 la même chose en utilisant l’injection programmatique et insertCSS () .

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