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:
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
"Overlay.inspectNodeRequested" is an event that should be listened to. you can call "Overlay.setInspectMode" to select a node.
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.. } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.