Chrome extension debugger undefined

Question

I'd like to simulate a trusted click event for a chrome extension using the debugger api seen here .

However, chrome.debugger is undefined.

chrome.debugger.attach(target, "1.2", function() {
    chrome.debugger.sendCommand(target, "Input.dispatchMouseEvent", arguments)
})

manifest.json

"permissions": [
    "debugger", "storage"
 ]

Am I missing something? How can I effectively call chrome.debugger? When I look at the permissions in chrome://extensions it shows that I have "Access the page debugger backend"

Answer 1

You need to attach the debugger interface to the tab via a background script:

let tabId = tab.id;
let debuggeeId = { tabId };
chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));

And then

const onDebuggerEnabled = (debuggeeId) => {
  debuggerEnabled = true
}

const onAttach = (debuggeeId) => {
chrome.debugger.sendCommand(
    debuggeeId, "Debugger.enable", {},
    onDebuggerEnabled.bind(null, debuggeeId));
}

Then you can use message passing to send requests to the background script from the content script: https://developer.chrome.com/extensions/messaging

And

if (debuggerEnabled) {
chrome.debugger.sendCommand(debuggeeId, "Input.dispatchMouseEvent", { type: "mousePressed", x: xC, y: yC, button: "left" }, function (e) { console.log('mousedown', e) });

chrome.debugger.sendCommand(debuggeeId, "Input.dispatchMouseEvent", { type: "mouseReleased", x: xC, y: yC, button: "left" }, function (e) { console.log('mouseup', e) });
} 
// xC, yC are your coordinates

This is a working example: https://github.com/Sentero-esp12/IsTrusted-event-Debugger-API