如何通过Chrome扩展程序更改Element Inspector工具提示/突出显示的文本? [英] How to change text of Element Inspector tooltip/highlight via Chrome Extension?

问题描述

我想更改Chrome元素检查器的工具提示文本. (将鼠标悬停在树形视图中时，您会在页面中看到的那个).我想在此添加其他信息.

I would like to change the tooltip text of of Chrome's Element Inspector. (The one you see within the page when hovering a node in the tree view). I want to add additional information there.

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

Is this somehow possible? I could not find any information in the docs.

或者在高光矩形的另一个角上创建一个新的小工具提示(它不会干扰现有的工具提示)也可以.感谢您的任何提示&提示.

Alternatively creating a new little tooltip at another corner of the highlight rectangle (which will not interfere with the existing one) would be fine too. Thanks for any hints & tips.

推荐答案

文本格式硬编码作为节点名称，ID和类名称的串联.更改这些值中的任何一个都将更改显示的工具提示.例如，使用element.className = 'Hello\xA0world!';设置类名称会导致包含Hello world!的工具提示(注意:我使用的是不间断空格\xA0，因为标题中的普通空格会替换为点).

The text format is hard-coded as the concatenation of the node name, ID and class names. Changing any of these values will change the displayed tooltip. For example, setting the class name using element.className = 'Hello\xA0world!'; results in a tooltip containing Hello world! (note: I'm using the non-breaking space \xA0 because normal spaces are replaced with dots in the title).

以前的方法在自定义文本的位置或颜色上没有太大的灵活性.一种对显示的文本进行更多控制的方法是通过在resources.pak中编辑devtools的源代码.

The previous method doesn't offer much flexibility in positioning or coloring of your custom text. A way to gain much more control over the displayed text is by editing the devtools' source code in resources.pak. This process is explained in detail in this answer (read it before continuing).

显示的文本是)并进行修改(确保字节数不变)，例如，通过重命名标签，删除引号和/或折叠多余的空白).例如:

The displayed text is part of an overlay that is rendered by InspectorOverlayPage.html. Edit resources.pak, search for that line (e.g. by searching for id="element-title") and modify it (make sure that the number of bytes does not change, e.g. by renaming tags, removing quotes and/or collapsing superfluous whitespace). For example:

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中的(硬编码)颜色配置来解决此问题. 高亮颜色在源/devtools/front_end/中的WebInspector.Color.PageHighlight处定义. common/Color.js .此资源已精简并包含在resources.pak中，因此，如果您使用十六进制编辑器打开resources.pak并查找WebInspector.Color.PageHighlight=，那么您将找到一种更改默认颜色值的方法(注意:当我尝试此方法时，我发现了该字符串的两次出现，因此我不得不修改第二次出现以获得所需的效果.

If you just want to change the colors, then you can also solve the issue by changing the (hard-coded) color configuration in resources.pak. The highlight colors are defined at WebInspector.Color.PageHighlight in Source/devtools/front_end/common/Color.js. This resource is minified and included in resources.pak, so if you open resources.pak with a hex editor and look for WebInspector.Color.PageHighlight=, then you will find a way to change the default color values (note: when I just tried this method, I found two occurrences of this string, I had to modify the second occurrence to get the desired effect.

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

For example, to change the color of the box's content, I modified the Content color definition. Inside resources.pak, there is a long line containing WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([111,168,220,.66]),.

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

After changing it to WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([255, 0,0 ,.66]), (note: the number of characters must match, pad it with spaces if needed), the default box will be red:

除了修改resources.pak，您还可以创建扩展会在开发工具的内容中运行，该工具会更改颜色，例如通过调用WebInspector.Color.PageHighlight.Content = WebInspector.Color.fromRGBA([255, 0,0,.66]);.

Instead of modifying resources.pak, you could also create an extension that runs in the content of the developer tools that changes the color, e.g. by calling WebInspector.Color.PageHighlight.Content = WebInspector.Color.fromRGBA([255, 0,0,.66]);.

或者，如果您根本不想与devtools集成，则可以创建一个扩展，该扩展使用

Or, if you don't want to integrate with the devtools at all, you could create an extension that uses the chrome.debugger API and the devtools protocol to highlight a node using the DOM.highlightNode command.

另一种选择是在 https://crbug.com/new 处打开功能请求，并要求更改颜色的选项. 相似的功能请求被拒绝，因此该选项不适用于您当前的情况.

Another option is to open a feature request at https://crbug.com/new and ask for an option to change the colors. A similar feature request was shot down, so this option won't work for your current case.

这篇关于如何通过Chrome扩展程序更改Element Inspector工具提示/突出显示的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！