Question

我目前正在尝试编写一个扩展，它会改变Document Inspector的CSS（“devtools.css”）。我使用内容脚本和匹配模式将CSS注入其他网页没有任何问题，但看起来这些不能以Inspector为目标。我错过了什么或有更好的方法吗？

结果：在检查Match Pattern documentation后我注意到我哪里出错了，架构部分对它允许的URL类型非常严格，而“chrome-devtools”不是其中之一。

更新：好吧，经过几个小时的工作，我已经开始使用实验性的API在Inspector中生成一个新的面板，但仍然没有运气来将css注入其父级。

Answer 1

我认为Webkit不允许您将CSS或Javascript注入开发人员工具中。 Chrome有一个实验性API，可让您添加标签和其他一些内容：http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

Answer 2

现在有一种方法可以做到这一点，但不是通过Chrome扩展程序。

您可以将样式放在Custom.css中，该样式在每个页面上运行，另外还有一个选择器（#-webkit-web-inspector），它对于检查器来说应该是唯一的。

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

Answer 3

您是否在清单中设置了“all_frames”并使用了正确的URL权限？开发工具URL代码块：

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

Answer 4

目前无法通过扩展程序API调整Chrome DevTools CSS。但是有一项功能请求 - 您可能希望跟踪此问题：http://crbug.com/83030 现在唯一的选择是拥有一个本地修改的DevTools副本，如下所述：http://code.google.com/chrome/devtools/docs/contributing.html

使用Chrome扩展程序将CSS注入文档检查器

4 个答案: