Comment visualiser une feuille de style css injectée par une extension Google Chrome à l'aide des outils dev?

j'injecte un fichier css à partir de mon extension chrome en utilisant le manifeste.json ( source complète):

  "content_scripts": [
    {
      "matches": [
        "http://*/*"
      ],
      "css":["src/inject/gfi_extension.css"],
      "js": [/*...*/]
    }
  ] 

dans Chrome Dev Tools, si j'inspecte un élément qui est affecté par le CSS injecté, les règles sont visibles, mais en haut à droite où le nom du fichier source serait normalement, il est juste dit "injected stylesheet."J'aimerais voir toutes les règles injectées, même celles qui affectent des éléments qui n'existent pas actuellement dans le DOM.

je serait attendu à ce que l' .css pour apparaître dans "sources" de la section "scripts de contenu" avec la .js fichiers, mais ils ne sont pas là.

Est-il un moyen pour afficher l' .fichier css via les outils dev? Si non, veuillez expliquer pourquoi il n'y en a pas.

Edit: je viens de trouver que cette question apparaît aussi comme une "sous-question" de celui-ci, cependant personne n'a tenté de répondre, même si il est accepté de répondre.

16
demandé sur Community 2015-02-09 06:50:10

3 réponses

content_scripts. J'ai déposé un bug ici: https://crbug.com/800070

lorsque L'extension est sous votre contrôle, Paul Irish suggère d'utiliser ce motif de code afin de rendre vos styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master

pour les extensions d'autres personnes, autant que je puisse dire il n'y a aucun moyen de voir le code source de les feuilles de style injectées dans les DevTools, si vous allez le content_scripts route.

4
répondu Kayce Basques 2018-01-09 18:23:50

Sources et Content Scripts. Vous devez aller au nom de l'extension et ensuite vous verrez les fichiers injectés.

enter image description here

-3
répondu wernersbacher 2016-06-08 11:12:16

devtools_css_view

Utilisez le processus suivant:

  • aller à la page Extensions (chrome: / / extensions)

  • cliquez sur le Developer mode case à cocher

  • Cliquez sur Inspect Views dans le texte sous l'extension en question

  • Accédez à des Sources

Références

-5
répondu Paul Sweatte 2015-07-31 20:40:03