使用 Chrome 扩展将 CSS 注入文档检查器答案

【问题标题】：Using Chrome Extension to inject CSS into the Document Inspector使用 Chrome 扩展将 CSS 注入文档检查器
【发布时间】：2011-10-12 06:11:00
【问题描述】：

我目前正在尝试编写一个扩展来更改文档检查器的 CSS（“devtools.css”）。使用内容脚本和匹配模式将 CSS 注入其他网页时我没有遇到任何问题，但似乎这些不能针对检查器。我错过了什么还是有更好的方法？

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

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

【问题讨论】：

Customise the look of the Chrome web inspector的可能重复

标签： google-chrome google-chrome-extension

【解决方案1】：

您是否在清单中设置了“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>

【讨论】：

通过权限后，看起来这是一个简单的架构问题，不允许必要的“chrome-devtools”。我想我必须继续使用 API。
@ench 这不是你想要做的吗？ ==> stackoverflow.com/questions/6843495/…

【解决方案2】：

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

【讨论】：

嗯，经过一些阅读，我确实可以用它来做我想做的事情......不过似乎应该有更好的方法。我得试一试，看看它看起来有多痛苦。
在检查了匹配模式文档后，我注意到我出错的地方，架构部分对它允许的 URL 类型非常严格，而“chrome-devtools”不是其中之一。

【解决方案3】：

目前无法通过扩展 API 调整 Chrome DevTools CSS。不过，有一个功能请求——你可能想跟踪这个问题：http://crbug.com/83030 目前唯一的选择是拥有 DevTools 的本地修改副本，如下所述：http://code.google.com/chrome/devtools/docs/contributing.html

【讨论】：

【解决方案4】：

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

您可以将样式放在 Custom.css 中，该文件在每个页面上运行，加上一个选择器 (#-webkit-web-inspector)，它对于检查员来说应该足够独特。

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

【讨论】：

我必须调查一下。
不幸的是，这不再是真的了。