web-dev-qa-db-fra.com

Comment injecter CSS en utilisant le fichier de script de contenu dans Chrome?

J'essaie d'injecter mon CSS à partir de JavaScript qui est injecté en tant que script de contenu:

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

J'ai trouvé question similaire sur l'injection de CSS, mais j'ai rencontré un problème lors de l'utilisation du code de réponse acceptée . Voici mon script.js Contenu:

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

Après avoir chargé une page, ce message apparaît dans la console:

Refus de charger l'extension chrome: //phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Les ressources doivent être répertoriées dans la clé de manifeste web_accessible_resources afin d'être chargées par des pages en dehors de l'extension.

Y a-t-il un moyen de réparer ceci? Ou, peut-être, une autre façon d'injecter un CSS à partir de ce fichier JavaScript?

Remarque: je ne peux pas inclure la feuille de style directement à partir du manifeste.

javascriptgoogle-chrome-extensioncontent-script
33
Roman

Vous pouvez ajouter au champ des autorisations du manifeste; Voir web_accessible_resources . Vous ajouteriez donc ceci au manifeste:

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

Voir aussi "Injection programmatique" . et insertCSS() .

Pour la plupart des applications, oubliez tout ce code createElement et ajoutez simplement le fichier CSS au manifeste:

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

même si je comprends que vous ne voulez pas faire cela dans ce cas précis.

56
Brock Adams