Question

我目前正在为chrome开发扩展程序（我是新手），并且正在为某个问题寻求帮助。扩展流程如下：

用户激活扩展程序
用户单击扩展面板中的图标以开始捕获
当鼠标光标位于DOM元素上方时，将其突出显示
用户单击时将获得“选择器”（元素的唯一标识符/路径）

在步骤2之后，我将新的Debugger实例附加到选项卡。看来您可以在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);
      });
    }
  }
);

我在How to highlight elements in a Chrome Extension similar to how DevTools does it?处发现了类似的问题，但是所提供的代码使我有些困惑。

感谢您的帮助

Answer 1

“ Overlay.inspectNodeRequested”是应监听的事件。您可以调用“ Overlay.setInspectMode”来选择一个节点。

background.js：

var version = "1.0";

//show popup page while click icon
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.debugger.attach({tabId:tab.id}, version,
        onAttach.bind(null, tab.id));
});

function onAttach(tabId) {
    if (chrome.runtime.lastError) {
        alert(chrome.runtime.lastError.message);
        return;
    }

    chrome.windows.create(
        {url: "headers.html?" + tabId, type: "popup", width: 800, height: 600});
}

headers.html：

<html>
<head>
  <meta charset="utf-8">
  <script src="headers.js"></script>
</head>
<body>
  <div id="container">
    <button id="btn_inspect">select node</button>
  </div>
</body>
</html>

headers.js：

var tabId = parseInt(window.location.search.substring(1));

var hightCfg = {
  'showInfo': true, 'showStyles':true, 'contentColor':{r: 155, g: 11, b: 239, a: 0.7}
}

//listen events when page is loaded
window.addEventListener("load", function() {
  chrome.debugger.sendCommand({tabId:tabId}, "DOM.enable");
  chrome.debugger.sendCommand({tabId:tabId}, "Overlay.enable");
  chrome.debugger.onEvent.addListener(onEvent);

  document.getElementById('btn_inspect').addEventListener('click', function(){
    chrome.debugger.sendCommand({tabId:tabId}, "Overlay.setInspectMode", 
      {'mode':'searchForNode', 'highlightConfig':hightCfg});
  });
});

window.addEventListener("unload", function() {
  chrome.debugger.detach({tabId:tabId});
});



var requests = {};

function onEvent(debuggeeId, message, params) {
  console.log('onEvent ...'+message);
  if (tabId != debuggeeId.tabId)
   return;

  if (message == "Network.inspectNodeRequested") {
    //do something..
  }
}

使用DebuggerApi

1 个答案: