CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
ench
ench

Reputation: 202

Using Chrome Extension to inject CSS into the Document Inspector

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.

Upvotes: 4

Views: 1100

Answers (4)

Maurice Lam
Maurice Lam

Reputation: 354

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/

Upvotes: 2

caseq
caseq

Reputation: 1979

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

Upvotes: 0

Richard M
Richard M

Reputation: 14543

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

Upvotes: 2

Darin
Darin

Reputation: 2121

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>

Upvotes: 0

Related Questions