Using Chrome Extension to inject CSS into the Document Inspector

Question

I'm currently trying to write an extension which alters the CSS of the Document Inspector ("devtools.css"). I've had no trouble injecting CSS into other webpages using Content Scripts and Match Patterns, but it appears these can't target the Inspector. Am I missing something or is there a better approach to this?

RESULT: After examining the Match Pattern documentation I noticed where I went wrong, the schema section is very strict in what kind of URL's it allows, and "chrome-devtools" is not one of them.

UPDATE: Well, with several hours work, I've come down to using the experimental API to generate a new panel in the Inspector, but still no luck with getting that to inject css into it's parent.

possible duplicate of [Customise the look of the Chrome web inspector](http://stackoverflow.com/questions/7149450/customise-the-look-of-the-chrome-web-inspector) — Paul Sweatte, Nov 27 '12 at 03:04

score 2 · Answer 1 · answered Nov 26 '12 at 08:02

2

There is now a way to do that, but not through Chrome Extensions.

You can put the styles in Custom.css, which runs on every page, plus a selector (#-webkit-web-inspector) which should be unique enough for the inspector.

http://darcyclarke.me/design/skin-your-chrome-inspector/

answered Nov 26 '12 at 08:02

Maurice Lam

354
2
12

I will have to look into this. – ench Feb 13 '13 at 18:55
1

This is unfortunately not true anymore. – Rudie Oct 12 '14 at 15:20

score 2 · Accepted Answer · answered Jul 25 '11 at 02:17

2

I don't think Webkit allows you to inject CSS or Javascript into the developer tools. There is an experimental API for Chrome which allows you to add tabs and a few other things: http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

answered Jul 25 '11 at 02:17

Richard M

14,244
6
52
48

Hmm, with some reading it does look like I might be able to do what I wanted with that... It seems like there ought to be a better way though. I'll have to try it out and see how painful it looks to be. – ench Jul 25 '11 at 03:00
1

After examining the Match Pattern documentation I noticed where I went wrong, the schema section is very strict in what kind of URL's it allows, and "chrome-devtools" is not one of them. – ench Jul 25 '11 at 03:33

score 0 · Answer 3 · answered Jul 25 '11 at 02:08

0

Do you have "all_frames" set in manifest and are you using the right URL permissions? Dev tools URL code block:

<a href="chrome-devtools://devtools/devTools.css"
class="webkit-html-resource-link"
title="chrome-devtools://devtools/devTools.css" style="max-width: 100%;
" line_number="1828" preferred_panel="resources">devTools.css:1828</a>

answered Jul 25 '11 at 02:08

Darin

2,071
2
17
14

After playing through the permissions, it looks like it's a simple matter of the schema not allowing for the necessary "chrome-devtools". I think I'll have to move on to using the API. – ench Jul 25 '11 at 03:32
@ench isn't this what you are trying to do? ==> http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools – Darin Jul 27 '11 at 22:05

score 0 · Answer 4 · answered Jul 25 '11 at 09:25

There's no way to tweak Chrome DevTools CSS via extension APIs at the moment. There's a feature request for that, though -- you may want to track this issue: http://crbug.com/83030 The only option for now would be to have a locally modified copy of DevTools, as described here: http://code.google.com/chrome/devtools/docs/contributing.html

Using Chrome Extension to inject CSS into the Document Inspector

4 Answers4