Comment injecter des CSS dans la page web par extension Chrome?

Je ne sais pas comment faire pour injecter du CSS dans une page web grâce à une extension Chrome. Je suis en train d'injecter ce dans une page web:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

Voici mon manifeste.json:

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"]
    }
  ],

    "permissions": [ "tabs", "http://test-website.com/*" ]

}
InformationsquelleAutor timmya | 2011-10-01
  1. 55

    Vous pouvez avoir à ajouter une ligne supplémentaire dans votre fichier manifeste:

    "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

    Le fichier CSS tel que défini dans "css": ["..."]sera ajouté à chaque page qui correspond à l'emplacement comme indiqué dans matches.

    Si vous êtes l'élaboration d'une extension Chrome, assurez-vous que vous avez un oeil à ces pages:

    1. Guide du développeur d'
    • Aucune idée sur comment cela pourrait fonctionner avec un chrome app wrapper et pas d'extension? Le manifeste est un peu différent, et en ajoutant les content_scripts l'article ne semble pas pour produire un résultat.
    InformationsquelleAutor Rob W
  2. 18

    Vous pouvez également injecter un fichier css dans un ou plusieurs onglet de contenu à l'aide de la syntaxe suivante détaillées sur le Chrome Onglets de la page web API:

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

    Vous aurez d'abord besoin de l'ID de votre onglet cible, bien sûr.

    L'Extension Chrome documentation n'est pas de discuter de comment la injecté CSS est interprété, mais le fait est que les fichiers CSS qui sont injectés dans une page web, par cette méthode, soit en les incluant dans le manifeste, sont interprétées comme des feuilles de style utilisateur.

    À cet égard, il est important de noter que si vous ne injecter des feuilles de style en utilisant ces méthodes, elles seront limitées à un moyen essentiel ( au moins, comme de Chrome v. 19 ): google Chrome ignore "!important" directives dans les feuilles de style utilisateurs. Votre injecté des règles de style va être emporté par quoi que ce soit inclus dans la page comme il a été écrit.

    Une façon de contourner, si vous voulez éviter d'injecter de style en ligne règles, est la suivante (j'utilise jQuery pour l'insertion proprement dite, mais il pourrait être fait directement avec Javascript):

    $(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});

    Vous pouvez ensuite mettre la feuille de style dans votre extension du dossier styles, mais vous n'aurez pas besoin de liste de n'importe où sur le manifeste. La partie pertinente ci-dessus est que vous allez utiliser le chrome API pour obtenir votre feuille de style de l'URL, puis brancher que dans le link href valeur. Maintenant, votre feuille de style sera donné une priorité plus élevée, et vous pouvez utiliser le "!important" de la directive en cas de besoin.

    C'est la seule solution qui fonctionne pour moi dans la dernière version de Chrome.

    • C'est une bonne solution de contournement pour résoudre ce Bug 1417569 sur Firefox.
    • Oui, cela fonctionne pour moi!
    InformationsquelleAutor jCyCle