How to inject javascript into Chrome DevTools itself

Question

Ok, so just the other day I learned that you can inspect the devtools if it is in its own window(explained here). I also learned that you can style the devtools with your own css by editing the Custom.css file in your profile on your computer(more on that here).

What I want to do is not only add css, but also javascript, via a chrome extension. I am very aware of devtools pages, but those do not do what I want. Pretty much I want to get a content script to run on the devtools inspector itself. I found one extension that does exactly this, but for the life of me I have not been able to replicate it(even when copy-pasting the code!!). The extension is the "Discover DevTools Companion extension" from Code School(on the webstore). They even explain how it works, but I still have had no luck. That was the only extension I have found that does what I want. So I guess what I'm really asking is if its just me that cannot get it to work or if others that try are having trouble also.

Answer 1

Usually, you cannot create a Chrome extension which injects code in a devtools page.
The "Discover DevTools Companion" extension ^{from now on, referred to as DDC} is allowed to do this, because this extension is whitelisted in the source code of Chromium: (this is no longer the case)

// 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");

If you want to publish an extension in the Chrome Web Store with these capabilities, give up.
If you want to create such an extension for personal / internal use, read further.

Method 1: Impersonate the DDC a whitelisted extension

The easiest way to create an extension with such permissions is to create an extension with the extension ID of a whitelisted extension (e.g. ChromeVox). This is achieved by copying the "key" key of its manifest file to your extension's manifest (see also: How to get the key?). This is a minimal example:

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": [ "<all_urls>" ]
   }],
   // 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.
})();

Note: This method is truly a hack. Since the extension shares the same ID as ChromeVox, both extensions cannot co-exist. And if Chrome decides to remove the whitelisted extension, then your permissions will evaporate.

Instead of filtering via the content script, you can also use the include_globs key to restrict the content script to devtools only.

Method 2: Modify resources.pak

I suggest to go with method 1 if possible. When method 1 fails (e.g. because the extension is no longer whitelisted), use the next method.

1. Get paktools.py, unpack.py and pack.py from DennisKehrig/patch_devtools (on Github).
2. Locate your Chrome directory containing resources.pak.
3. Run python2 unpack.py resources.pak, which creates a directory resources containing all files (all file names are numbers).
4. Locate the file containing a script which runs in the context of the developer tools. Add your desired code there.
5. Remove resources.pak
6. Run python2 pack.py resources to create the new resources.pak file.

Note: resources.pak may be replaced when Chrome is updated, so I suggest to create a script which automates my described algorithm. That shouldn't be too difficult.

If you're interested, you can look up the .pak file format in ui/base/resource/data_pack_literal.cc (description in human language).

Answer 2

For those googlers who end up at this page (as I did) looking for something else, this page answers the question of manipulating DevTools ITSELF - not adding jQuery to DevTools, or injecting javaScript onto a web page. For those, see here instead:

Inject jQuery into DevTools (Chrome or Firefox):
Firefox DevTools: Automatically injecting jQuery

Inject your own javascript/css onto any web page:
How to edit a website's background colors