Enable userscripts on the chrome-devtools protocol to allow customization

327 views
Skip to first unread message

Ronny

unread,
May 21, 2011, 7:09:16 PM5/21/11
to Google Chrome Developer Tools
I think having userscripts would lead the community to develop great
things such as devtools themes, small additions (I could think of a
color picker, other views for the network tab etc.)
I've tried to make one myself, just to be sure it doesn't work. Well,
it doesn't: http://userscripts.org/scripts/review/101968

Another way is to provide style controls via new experimental APIs,
i.e. "chrome.experimental.devtools.style", but this is only a partial
solution.

What do you think?

Andrey Kosyakov

unread,
May 23, 2011, 8:34:37 AM5/23/11
to google-chrome-...@googlegroups.com
We discussed allowing content scripts for DevTools at some point, but decided against this, as we don't want to offer the entire CSS and DOM contents of DevTools as a stable extension interface. Consider that some other tools that do this require different version of extensions for different version of a tool -- in a continuously updating Chrome, this just wouldn't work.

So whatever extensions are written for DevTool have to use our designated API for this -- we're open to extending it, provided there are good use cases that are not yet covered.

As for your scenarios in particular, I think that the color picker is generic enough to be contributed to the core WebInspector, and we do consider supporting extension-provided item views for the network panel.

Best regards,
Andrey.

DarcyClarke

unread,
May 24, 2011, 5:55:58 AM5/24/11
to Google Chrome Developer Tools
I love this idea of a way to expose at least the styles of the Dev
Tools to extensions. I brought this up, as you have Ronny, to Paul
Irish and he pointed us here. I think the idea is to have the
capabilities to write extensions that are similar to Firerainbow
(http://firerainbow.binaryage.com/) or the like. The example given
makes a lot of sense just without proper context. Something simple
that allows for style manipulation / addition to pre-existing and new
panels would be ideal:

chrome.experimental.devtools.panels.elements.style("li { background:
#bada55; }");

In the above use case all you would need to do is extend the
devtools.panels API to allow for insertion of CSS. As you can see, the
context is the elements panel and this would work the same for any new
panels created. It may even be more beneficial to pass an object of
key value pairs instead of a string. Much like:

chrome.experimental.devtools.panels.elements.style({ "color" :
"#bada55;", "background" : "fuschia"; });

Again, this is all up for discussion but I think it's worth while to
look into extending this kind of capability.

Cheers,
Darcy

Ronny

unread,
May 24, 2011, 6:10:07 AM5/24/11
to Google Chrome Developer Tools
Thanks Andrey! I understand the reasoning, and maybe userscripts will
indeed break too fast. But I don't think for example that the elements
panel's DOM structure is so fragile, and writing userstyles for it
could be really easy. I agree with Darcy, all we need is something
like what he suggested.

We don't need a full-blown 'theme gallery' now, let's first test the
water and see if anyone's actually interested in DevTools skins ;-)
I'd go with something simple like
chrome.experimental.devtools.addStyle(cssString); This way we could
easily pass a string from normal CSS to this line and package as a
devtools extension.

Thanks,
Ronny

pfeldman

unread,
May 22, 2011, 2:26:38 AM5/22/11
to Google Chrome Developer Tools
Our strategy to extending DevTools UI is by means of the extension
APIs. Sounds like you are aware of those (code.google.com/chrome/
extensions/trunk/experimental.html, experimental.devtools.*). If you
have a specific request to extend our API surface there, please let us
know here or via filing a bug at crbug.com.

Thanks
Pavel

Ronny

unread,
May 25, 2011, 3:03:48 PM5/25/11
to Google Chrome Developer Tools
Thanks Pavel! Really appreciated.
I've filed an issue, it's over here: http://code.google.com/p/chromium/issues/detail?id=83922

Cheers,
Ronny

Paul Irish

unread,
Aug 15, 2011, 2:22:05 PM8/15/11
to google-chrome-...@googlegroups.com
(old thread)

Darcy just blogged about how to customize the coloring inside devtools with some devtools.css hacking:

Ronny

unread,
Aug 17, 2011, 4:21:56 AM8/17/11
to Google Chrome Developer Tools
Yeah this is really cool :-)
I still hope some API will be developed though, so installation could
be as easy as installing extensions.
Other than that, userscripts are still far away.

Cheers,
Ronny

On Aug 15, 9:22 pm, Paul Irish <paulir...@google.com> wrote:
> *(old thread)*
Reply all
Reply to author
Forward
0 new messages