Javascript 如何通过Chrome扩展更改元素检查器工具提示/高亮显示的文本？_Javascript_Google Chrome_Google Chrome Extension_Google Chrome Devtools

Javascript 如何通过Chrome扩展更改元素检查器工具提示/高亮显示的文本？

javascript google-chrome google-chrome-extension google-chrome-devtools

Javascript 如何通过Chrome扩展更改元素检查器工具提示/高亮显示的文本？,javascript,google-chrome,google-chrome-extension,google-chrome-devtools,Javascript,Google Chrome,Google Chrome Extension,Google Chrome Devtools,我想更改Chrome元素检查器的工具提示文本。（在树视图中悬停节点时在页面中看到的节点）。我想在这里添加更多信息这有可能吗？我在文档中找不到任何信息或者，在高亮矩形的另一个角创建一个新的小工具提示（不会干扰现有的工具提示）也可以。感谢您的提示和提示。因此答案基本上是“您不能在扩展中这样做”（如中所示，修改开发工具工具提示）指向关于替换Chrome开发工具的讨论。使用Chrome的命令行是可能的，但扩展无法做到这一点但是，您可以在页面中插入一个内容脚本，模拟开发工具的突出显示。它不会与

我想更改Chrome元素检查器的工具提示文本。（在树视图中悬停节点时在页面中看到的节点）。我想在这里添加更多信息

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

或者，在高亮矩形的另一个角创建一个新的小工具提示（不会干扰现有的工具提示）也可以。感谢您的提示和提示。

因此答案基本上是“您不能在扩展中这样做”（如中所示，修改开发工具工具提示）

指向关于替换Chrome开发工具的讨论。使用Chrome的命令行是可能的，但扩展无法做到这一点

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

您可以从元素选择/高亮显示的角度进行查看。我认为它在。

所以答案基本上是“您不能在扩展中这样做”（如中所示，修改开发工具工具提示）

指向关于替换Chrome开发工具的讨论。使用Chrome的命令行是可能的，但扩展无法做到这一点

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

您可以从元素选择/高亮显示的角度进行查看。我认为它是节点名、ID和类名的串联。更改这些值中的任何一个都将更改显示的工具提示。例如，使用

element.className='Hello\xA0world！'设置类名生成包含Helloworld！的工具提示（注意：我使用的是不间断空格\xA0
，因为标题中的普通空格替换为点）
前面的方法在自定义文本的定位或着色方面没有提供太多的灵活性。在resources.pak
中编辑devtools的源代码，可以更好地控制显示的文本。有关此过程的详细说明，请参见（在继续之前阅读它）
显示的文本是由渲染的覆盖的一部分。编辑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>

OLD:px×；二甲苯
新的：。此资源已缩小并包含在resources.pak
中，因此如果您使用十六进制编辑器打开resources.pak
，并查找WebInspector.Color.PageHighlight=
，则您将找到更改默认颜色值的方法（注意：当我刚刚尝试此方法时，我发现此字符串出现了两次，我必须修改第二次出现以获得所需的效果
例如，要更改框内容的颜色，我修改了内容颜色定义。在资源.pak
中，有一条长线包含WebInspector.color.PageHighlight={content:WebInspector.color.fromRGBA（[111168220.66]），

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

选择
除了修改resources.pak
，您还可以通过调用WebInspector.color.PageHighlight.Content=WebInspector.color.fromRGBA（[255,0,0,66]）；
来更改颜色
或者，如果您根本不想与devtools集成，可以创建一个扩展，该扩展使用API和devtools协议来使用
另一个选项是在打开功能请求并请求更改颜色的选项。a，因此此选项不适用于当前情况。
作为节点名称、ID和类名的串联。更改这些值中的任何一个都将更改显示的工具提示。例如，使用element.className设置类名=“Hello\xA0world！”；
导致工具提示包含Helloworld！
（注意：我使用的是不间断空格\xA0
，因为标题中的普通空格将替换为点）
前面的方法在自定义文本的定位或着色方面没有太大的灵活性。对显示文本进行更多控制的一种方法是在resources.pak
中编辑devtools的源代码。此过程将在（阅读然后继续）中详细说明
显示的文本是覆盖的一部分，该覆盖由以下方式呈现：编辑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>

OLD:px×；px
新增：。此资源已缩小并包含在resources.pak
中，因此如果您使用十六进制编辑器打开resources.pak
，并查找WebInspector.Color.PageHighlight=
，则您将找到更改默认颜色值的方法（注意：当我刚刚尝试此方法时，我发现此字符串出现了两次，我必须修改第二次出现以获得所需的效果
例如，要更改框内容的颜色，我修改了内容
颜色定义。在资源.pak
中，有一条长线包含WebInspect