web-dev-qa-db-fra.com

Comment injecter CSS dans une page Web via l'extension Chrome?

Je ne sais pas comment injecter CSS dans une page Web via une extension Chrome. J'essaie d'injecter cela dans une page Web:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

Voici mon manifest.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/*" ]

}
javascriptcssgoogle-chromegoogle-chrome-extension
36
timmya

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 correspondant à l'emplacement indiqué dans matches.

Si vous développez une extension Chrome, assurez-vous de consulter ces pages:

  1. Guide du développeur
58
Rob W

Vous pouvez également injecter un fichier css dans le contenu d'un ou plusieurs onglets en utilisant la syntaxe suivante, comme indiqué sur la page Web de l'API Chrome Tabs :

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

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

La documentation Chrome Extension ne discute pas comment le CSS injecté est interprété, mais le fait est que les fichiers CSS qui sont injectés dans une page Web, par cette méthode ou en les incluant dans le manifeste, sont interprétés comme des feuilles de style utilisateur.

À cet égard, il est important de noter que si vous injectez des feuilles de style en utilisant ces méthodes, elles seront limitées d'une manière cruciale (au moins, à partir de Chrome v.19): Chrome ignore les directives "! important" dans les feuilles de style utilisateur. Vos règles de style injectées seront trompées par tout ce qui est inclus dans la page comme il a été écrit.

Une solution de contournement, si vous voulez éviter d'injecter des règles de style en ligne, est la suivante (j'utilise jQuery pour l'insertion réelle, mais cela pourrait être fait avec du Javascript simple):

$(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 placer la feuille de style dans le dossier de styles de votre extension, mais vous n'aurez pas besoin de la répertorier n'importe où sur le manifeste. La partie pertinente ci-dessus est que vous utiliserez l'API chrome pour obtenir l'URL de votre feuille de style, puis la brancher en tant que valeur href du lien. Maintenant, votre feuille de style aura une priorité plus élevée, et vous peut utiliser la directive "! important" si nécessaire.

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

21
jCyCle