I am trying to attach a debugger to the current tab but it gives me this error

Uncaught (in promise) Error: Cannot access a chrome-extension:// URL of different extension

Here is my background script file that is handling this

chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
  if (req.name == "test") {
    const [tab] = await chrome.tabs.query({
      active: true
    })

    console.log(tab)
    const tabId = tab.id
    console.log(tabId)
    const text = "Hello there mate"

    await chrome.debugger.detach({ tabId: tabId })
    console.log("before attach")
    await chrome.debugger.attach({ tabId }, "1.2")
    console.log("after attach")

    await chrome.debugger.sendCommand({ tabId }, "Runtime.enable")
    await chrome.debugger.sendCommand({ tabId }, "DOM.enable")

    for (const char of text) {
      console.log(char)
      await chrome.debugger.sendCommand({ tabId }, "Input.dispatchKeyEvent", {
        type: "keyDown",
        text: char
      })
      await sleep(50)
      await chrome.debugger.sendCommand({ tabId }, "Input.dispatchKeyEvent", {
        type: "keyUp",
        text: char
      })
      await sleep(50)
    }
    sendResponse(tabId)
  }
})

I am sending the a message from my content script 5 seconds after the content script loads.

Why is this not working ?

I was expecting it to attach the debugger and run the dispatch event in order to write in a input field.