Using the Chrome Extension to Paste CSS into the Document Inspector

I'm currently trying to write an extension that modifies the CSS Document Inspector ("devtools.css"). I had no problem embedding CSS in other webpages using content scripts and match patterns, but they don't seem to be able to target the Inspector. Am I missing something or is there a better approach to this?

RESULT: After studying the documentation of Match Pattern, I noticed that I was mistaken, the section of the scheme is very strict in what URL it allows, and "chrome devtools" is not one of them.

UPDATE: Well, with a few hours to work, I came up with using the experimental API to create a new panel in the Inspector, but still no luck with css in parent.

+4
source share
4 answers

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

+2
source

Now there is a way to do this, but not through Chrome extensions.

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

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

+2
source

Do you have "all_frames" set in the manifest, and do you use access rights? Dev tools code 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> 
0
source

There is currently no way to customize CSS Chrome DevTools through the extension API. However, there is a function request for this: you can track this problem: http://crbug.com/83030 The only option now is to have a locally modified copy of DevTools, as described here: http://code.google.com/chrome/devtools/ docs / contributing.html

0
source

All Articles