使用DebuggerApi突出显示Chrome扩展中的当前DOM元素

我目前正在为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);
});
}
}
);

我在这里发现了类似的问题。如何在Chrome扩展中突出显示类似于DevTools的元素？但是提供的代码让我有点困惑。

感谢您的帮助

"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..
}
}

相关内容

最新更新

热门标签：