Highlight a node using the debugger API

[Stephane Saux]

Trying a simple test to see whether I could get a similar behavior as the dev window provide when it highlights an element. This is not production code. I get this error:

{message: '{"code":-32600,"message":"Overlay must be enabled before a tool can be shown"}'} The error only occurs in the last command of the command stack.

So I added the command "Overlay.enable" to the stack of command, but I still get the same error.

I suppose in a production implementation, I'd have the tab id cached. I noted that getDocument always returns 1 for "result.root", so could I skip it (then proceed with the "querySelector" command.) But first I would want to not get the error.

My extension does highlight by adding to the DOM some zIndex'ed overlay and as someone as mentioned somewhere, it can affect the DOM, whereas the Debugger protocol highlight does not. It would make sense for my extension to use it.

Any pointer would be useful.

Here's the test code:

chrome.debugger.attach(
    { tabId: tab.id },
    '1.3', function () {
        chrome.debugger.sendCommand(
            {tabId:tab.id},
            "Overlay.enable",
            {},
            function (result) {
                chrome.debugger.sendCommand(
                    { tabId: tab.id },
                    "DOM.getDocument",
                    {depth: -1},
                    function (result) {
                        if (chrome.runtime.lastError) {
                            console.error(chrome.runtime.lastError);
                        } else {
                            chrome.debugger.sendCommand(
                                { tabId: tab.id },
                                "DOM.querySelector",
                                {
                                    nodeId: result.root.nodeId,
                                    selector: '[data-eid="collection-122836-dynamic_centerpiece_tab"]'
                                },
                                function (result) {
                                    if (chrome.runtime.lastError) {
                                        console.error(chrome.runtime.lastError);
                                    } else {
                                        chrome.debugger.sendCommand(
                                            { tabId: tab.id },
                                            "DOM.highlightNode",
                                            {
                                                nodeId: result.nodeId,
                                                highlightConfig: {
                                                    contentColor: {
                                                        r: 155,
                                                        g: 11,
                                                        b: 239,
                                                        a: 0.7
                                                    },
                                                    showInfo: true
                                                }
                                            },
                                            function (result) {
                                                if (chrome.runtime.lastError) {
                                                    console.error(chrome.runtime.lastError);
                                                }
                                            }
                                        );
                                    }                                
                                }
                            );
                        }
                    }
                );
            }
        );
    }
);

[wOxxOm]

The built-in protocol monitor in devtools shows that devtools itself uses Overlay.highlightNode, also the documentation doesn't list any parameters for DOM.highlightNode, but it does for the one in Overlay, which implies the DOM one is deprecated/dysfunctional. You can suggest adding a corresponding note to the documentation in https://crbug.com.

[Stephane Saux]

Thanks for getting back to me. I appreciate how you support the community. I naively tried to change the call from DOM.highlighNode to Overlay.highlightNode (after all that API just requires a nodeId and a highlighConfig, which I have) but I get the same error. What's the protocol inspector? Would it help me understand the steps I need to take to emulate for the dev window does?

[wOxxOm]

Protocol monitor, not protocol inspector. It's a built-in panel in devtools. There are several articles about it, here's one: https://developer.chrome.com/blog/cdp-command-editor