Argthtjtr

I'm currently building an extension for chrome (I'm a beginner) and looking for some help to some one issue. The flow of the extension is the following:

• User activate the extension


• User click an icon in the extension panel to start the capture


• When the mouse cursor is over a DOM element it highlight it


• When the user click it gets the "selector" (unique identifier/path to the element)

After step 2 I attach a new Debugger instance to the tab. it seems like you can do this action either in background.js or content-script.js. Both work so my question is which one makes more sense. I'd say content-script because it doesn't interact directly with the browser but only with my extension. Am I right?

Second question is when using the DebuggerAPI I need to send command using the DevTools Protocol Viewer. I guess the command I must send to interact with my DOM element sit under this category (https://chromedevtools.github.io/devtools-protocol/tot/DOM). Most of the command requires a NodeId parameter. My question is how would I get this NodeId when the mouse cursor is over it. I have the following event in my content-script

chrome.runtime.onMessage.addListener(function(msg, sender){

    if(msg == "togglePanel"){

        togglePanel();

    } else if (msg == "startCaptureElement") {

      console.log("- Content-Script.js: Add Mouse Listener");

      document.addEventListener('mouseover', captureEvent);

    } else if (msg == "stopCaptureElement") {

      console.log("- Content-Script.js: Remove Mouse Listener");

      document.removeEventListener('mouseover', captureEvent);

    }

});



function captureEvent(el) {

    //console.log("- Content-Script.js: It's moving");

    console.log(el);

    chrome.runtime.sendMessage("highlightElement");

}

In my background.js script

chrome.runtime.onMessage.addListener(

  function(request, sender, sendResponse) {

    console.log(sender);



    if (request == "startCaptureElement") {

      console.log("- Background.js: Attach the debugger");

      chrome.debugger.attach({tabId: sender.tab.id}, "1.0");

      chrome.tabs.sendMessage(sender.tab.id, "startCaptureElement");

    } else if (request == "stopCaptureElement") {

      console.log("- Background.js: Detach the debugger");

      chrome.debugger.detach({tabId: sender.tab.id});

      chrome.tabs.sendMessage(sender.tab.id, "stopCaptureElement");

    } else if (request == "highlightElement") {

      console.log("- Background.js: Highlight Element");

      chrome.debugger.sendCommand({tabId: sender.tab.id}, "DOM.enable", {});

      chrome.debugger.sendCommand({tabId: sender.tab.id}, "Overlay.inspectNodeRequested", {}, function(result) {

        console.log(result);

      });

    }

  }

);

I found the similar question here How to highlight elements in a Chrome Extension similar to how DevTools does it? but the code provided confused me a little bit.

Thanks for your help