user-interface - tools - inspeccionar elemento google chrome
¿Cómo ver la hoja de estilo css inyectada por una extensión de Google Chrome usando herramientas dev? (3)
Estoy inyectando un archivo css desde mi extensión de Chrome usando el archivo manifest.json ( fuente completa ):
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
En Chrome Dev Tools, si inspecciono un elemento que está afectado por el css inyectado, las reglas son visibles, pero en la parte superior derecha, donde normalmente estaría el nombre de archivo de origen, simplemente dice "hoja de estilo inyectada". Me gustaría ver TODAS las reglas que se están inyectando, incluso aquellas que afectan elementos que no existen actualmente en el DOM.
Hubiera esperado que .css apareciera en "fuentes" en "scripts de contenido" con los archivos .js, pero no están allí.
¿Hay alguna manera de ver el archivo .css a través de las herramientas de desarrollo? Si no, explique por qué no hay.
Edit: Acabo de encontrar que esta pregunta también aparece como una "subpregunta" de esta , sin embargo, nadie de allí ha intentado responderla, aunque haya una respuesta aceptada.
Parece que no hay manera de hacer esto si inyectas el CSS a través de content_scripts . He archivado un error aquí: https://crbug.com/800070
Cuando la extensión está bajo su control, Paul Irish sugiere usar este patrón de código para hacer que sus estilos sean inspeccionables: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master
Para las extensiones de otras personas, por lo que puedo decir, no hay forma de ver el código fuente de las hojas de estilo inyectadas en DevTools, si sigue la ruta content_scripts .
Use la aplicación Chrome y la herramienta de desarrollo de extensiones en una extensión que inyecta CSS, como Bootstrap Grid Overlay :
La URL inyectada se puede usar en la pestaña de la consola en la aplicación para obtener la URL de tiempo de ejecución utilizando el método getURL :
chrome.runtime.getURL("src/grid.css")
y producir la fuente:
Referencias
