Выделите текущий элемент DOM в расширении Chrome, используя DebuggerApi

Question

В настоящее время я создаю расширение для Chrome (я новичок) и ищу какую-то помощь по одной проблеме.Расширение выглядит следующим образом:

• Пользователь активирует расширение
• Пользователь нажимает значок на панели расширений, чтобы начать захват
• Когда курсор мышинад элементом DOM он выделяет его
• Когда пользователь нажимает, он получает "селектор" (уникальный идентификатор / путь к элементу)

После шага 2 я присоединяю новый отладчикэкземпляр на вкладку.кажется, что вы можете сделать это действие либо в background.js, либо в content-script.js.Обе работы, поэтому мой вопрос, какой из них имеет больше смыслаЯ бы сказал, контент-скрипт, потому что он не взаимодействует напрямую с браузером, а только с моим расширением.Я прав?

Второй вопрос: при использовании DebuggerAPI мне нужно отправить команду с помощью средства просмотра протокола DevTools.Я предполагаю, что команда, которую я должен послать, чтобы взаимодействовать с моим элементом DOM, находится под этой категорией (https://chromedevtools.github.io/devtools-protocol/tot/DOM). Большая часть команды требует параметр NodeId. Мой вопрос заключается в том, как мне получить этот NodeId, когда курсор мыши находится над ним.У меня есть следующее событие в моем контент-скрипте

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");
}

В моем скрипте background.js

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);
      });
    }
  }
);

я нашел подобный вопрос здесь Как выделить элементы в ChromeРасширение похоже на то, как это делает DevTools? , но предоставленный код немного смутил меня.

Спасибо за вашу помощь