Cómo inyectar javascript en Chrome DevTools en sí

Ok, entonces el otro día supe que puedes inspeccionar los devtools si está en su propia ventana (explicado aquí ). También aprendí que puede aplicar estilo a los devtools con su propio CSS editando el archivo Custom.css en su perfil en su computadora (más sobre esto aquí ).

Lo que quiero hacer no es solo agregar css, sino también javascript, a través de una extensión de Chrome. Soy muy consciente de las páginas de devtools , pero esas no hacen lo que quiero. Casi quiero que se ejecute un script de contenido en el propio inspector de devtools. Encontré una extensión que hace exactamente esto, pero por mi vida no he podido replicarlo (¡incluso cuando copie y pegue el código!). La extensión es la “extensión de compañero de desarrollo de Discover DevTools” de Code School ( en la tienda web ). Incluso explican cómo funciona , pero todavía no he tenido suerte. Esa fue la única extensión que encontré que hace lo que quiero. Entonces, supongo que lo que realmente estoy preguntando es si solo soy yo el que no puede hacer que funcione o si otros que lo intentan también están teniendo problemas.

Por lo general, no puedes crear una extensión de Chrome que inyecte código en una página de devtools.
A partir de ahora, la extensión “Discover DevTools Companion” , conocida como DDC, puede hacerlo, porque esta extensión se incluye en la lista blanca en el código fuente de Chromium : (este ya no es el caso)

// Whitelist "Discover DevTools Companion" extension from Google that // needs the ability to script DevTools pages. Companion will assist // online courses and will be needed while the online educational programs // are in place. scripting_whitelist_.push_back("angkfkebojeancgemegoedelbnjgcgme"); 

Si desea publicar una extensión en Chrome Web Store con estas capacidades, renuncie.
Si desea crear dicha extensión para uso personal / interno, lea más.

Método 1: suplantar al DDC con una extensión incluida en la lista blanca

La forma más fácil de crear una extensión con dichos permisos es crear una extensión con el ID de extensión de una extensión incluida en la lista blanca (por ejemplo, ChromeVox). Esto se logra copiando la "key" de su archivo de manifiesto en el manifiesto de su extensión (consulte también: ¿Cómo obtener la clave? ). Este es un ejemplo mínimo:

manifest.json

 { // WARNING: Do NOT load this extension if you use ChromeVox! // WARNING: Do NOT load this extension if you use ChromeVox! // WARNING: This is a REALLY BIG HAMMER. "content_scripts": [{ "js": [ "run_as_devtools.js" ], "matches": [ "" ] }], // This is the key for kgejglhpjiefppelpmljglcjbhoiplfn (ChromeVox) "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB", "manifest_version": 2, "name": "Elevated Devtools extension", "version": "1.0" } 

run_as_devtools.js

 if (location.protocol === 'chrome-devtools:') (function() { 'use strict'; // Whatever you want to do with the devtools. })(); 

Nota: Este método es realmente un truco. Dado que la extensión comparte la misma ID que ChromeVox , ambas extensiones no pueden coexistir. Y si Chrome decide eliminar la extensión incluida en la lista blanca, sus permisos se evaporarán.

En lugar de filtrar a través del script de contenido, también puede usar la clave include_globs para restringir el script de contenido a devtools solamente.

Método 2: modifique resources.pak

Sugiero ir con el método 1 si es posible. Cuando el método 1 falla (por ejemplo, porque la extensión ya no está en la lista blanca), use el siguiente método.

  1. Obtenga paktools.py , unpack.py y pack.py de DennisKehrig / patch_devtools (en Github).
  2. Ubique su directorio de Chrome que contiene resources.pak .
  3. Ejecute python2 unpack.py resources.pak , que crea un directorio de resources contiene todos los archivos (todos los nombres de archivo son números).
  4. Ubique el archivo que contiene una secuencia de comandos que se ejecuta en el contexto de las herramientas de desarrollador. Agregue su código deseado allí.
  5. Eliminar resources.pak
  6. Ejecute los python2 pack.py resources para crear el nuevo archivo resources.pak .

Nota: resources.pak puede reemplazarse cuando se actualiza Chrome, por lo que sugiero crear un script que automatice mi algoritmo descrito. Eso no debería ser demasiado difícil.

Si está interesado, puede buscar el formato de archivo .pak en ui/base/resource/data_pack_literal.cc ( descripción en lenguaje humano ).