13

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.

Improve this question

2 Answers 2

Reset to default
28

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

19 Comments

Well, that explains a LOT. Thanks so much for such a detailed and well laid out answer, I might just have to try those methods out for personal use, again thanks.
For anyone who wants to see the Chromium source file, it has moved here
DDC extension was removed, but chromevox is still there code.google.com/p/chromium/codesearch#chromium/src/chrome/… so one needs to use key "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB" instead
@auser Thanks for the heads-up. It seems to have been removed in Chrome 44 with codereview.chromium.org/1082363004.
Now that we are forced to inject CSS using an extension (Custom.css no longer works), can both of this tasks (inject CSS and JS) be done in one single extension?
|
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.