How To Change Text Of Element Inspector Tooltip/highlight Via Chrome Extension?

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 informat

Solution 1:

So the answer is basically "you can't do that in an extension" (as in, modify the Dev Tools tooltip).

Charles' answer points to a guide that talks about replacing the Chrome Dev Tools. It's possible using the command line of Chrome, but it's not something an extension can do.

---

You can, however, inject a content script in the page that would mimic the Dev Tool's highlighting. It will not be integrated with Dev Tools, but might be enough for your purpose.

You can take a look at ABP's implementation of element selection/highlight as a starting point. I think it's in this file.

Solution 2:

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

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:  <spanid="node-width"></span><spanclass="px">px</span><spanclass="px">&#xD7;</span><spanid="node-height"></span><spanclass="px">px</span>NEW:  <aid=node-width></a><aclass=px>px</a><aclass=px>&#xD7;</a><aid=node-height></a><aclass=px>px</a><astyle="color:red;">My custom text</a>

---

Changing colors only

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.

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]),.

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:

Alternatives

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]);.

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.

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.