如何通过Chrome扩展程序更改Element Inspector工具提示/突出显示的文字？

Question

我想更改Chrome的Element Inspector的工具提示文字。 （在树视图中悬停节点时在页面中看到的那个）。我想在那里添加其他信息。

这有可能吗？我在文档中找不到任何信息。

或者在高亮矩形的另一个角上创建一个新的小工具提示（不会干扰现有的那个）也没关系。感谢任何提示＆amp;提示。

Answer 1

所以答案基本上是＆＃34;你不能在扩展中做到这一点＆＃34; （如，修改开发工具工具提示）。

Charles' answer指向a guide，其中涉及替换 Chrome开发工具。可以使用Chrome的命令行，但这不是扩展程序可以做的事情。

但是，您可以在页面中注入一个模仿开发工具突出显示的内容脚本。它不会与Dev Tools集成，但可能足以满足您的需要。

您可以查看元素选择/突出显示的ABP's implementation作为起点。我认为它在this file。

Answer 2

text format is hard-coded作为节点名称，ID和类名的串联。更改任何这些值将更改显示的工具提示。例如，使用element.className = 'Hello\xA0world!';设置类名称会导致包含Hello world!的工具提示（注意：我使用的是不间断空格\xA0，因为标题中的点会替换普通空格）。

以前的方法在定制或着色自定义文本方面没有太大的灵活性。通过在resources.pak中编辑devtools的源代码，可以更好地控制显示的文本。 this answer（继续之前读取）详细说明了此过程。

显示的文字是由InspectorOverlayPage.html呈现的叠加层的一部分。编辑resources.pak，搜索该行（例如，搜索id="element-title"）并修改它（确保字节数不会改变，例如通过重命名标记，删除引号和/或折叠多余的空格）。例如：

OLD:  <span id="node-width"></span><span class="px">px</span><span class="px"> &#xD7; </span><span id="node-height"></span><span class="px">px</span>
NEW:  <a id=node-width></a><a class=px>px</a><a class=px> &#xD7; </a><a id=node-height></a><a class=px>px</a><a style="color:red;">My custom text</a>

仅更改颜色

如果您只想更改颜色，则还可以通过更改resources.pak中的（硬编码）颜色配置来解决问题。 高亮颜色在Source/devtools/front_end/common/Color.js的WebInspector.Color.PageHighlight处定义。此资源已缩小并包含在resources.pak中，因此，如果您使用十六进制编辑器打开resources.pak并查找WebInspector.Color.PageHighlight=，那么您将找到一种更改默认颜色值的方法（注意：当我刚尝试这个方法时，我发现这个字符串出现了两次，我不得不修改第二次出现以获得所需的效果。

例如，要更改框内容的颜色，我修改了Content颜色定义。在resources.pak内，有一个包含WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([111,168,220,.66]),的长行。

将其更改为WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([255, 0,0 ,.66]),（注意：字符数必须匹配，如果需要，请用空格填充），默认框将为红色：

替代

您也可以create an extension that runs in the content of the developer tools改变颜色，而不是修改resources.pak，例如致电WebInspector.Color.PageHighlight.Content = WebInspector.Color.fromRGBA([255, 0,0,.66]);。

或者，如果您根本不想与devtools集成，则可以创建一个使用chrome.debugger API和devtools协议的扩展程序，以使用DOM.highlightNode command突出显示一个节点。 / p>

另一种选择是在https://crbug.com/new打开功能请求，并要求选择更改颜色。一个similar feature request was shot down，因此此选项不适用于您当前的情况。