Inline script triggers CSP error in chrome extension

When using vite plugin vue devtools to develop a chrome extension page, the extension reported the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost: * http://127.0.0.1: *". Either the 'unsafe-inline' keyword, a hash ('sha256-FhCISuQOxB+ZEYLZlvQzFWx4//lRqFQPUeFSEkdvsT0='), or a nonce ('nonce-...') is required to enable inline execution.

It seems to be triggered by the following code:

function injectVueHookToIframe(iframe) {
  if (iframe.__vdevtools__injected) return
  try {
    iframe.__vdevtools__injected = true
    const inject = () => {
      try {
        iframe.contentWindow.__VUE_DEVTOOLS_IFRAME__ = iframe
        const script = iframe.contentDocument.createElement('script')
        script.textContent = `;(${detectIframeApp.toString()})(window, true)`
        iframe.contentDocument.documentElement.appendChild(script)
        script.parentNode.removeChild(script)
      } catch (e) {}
    }
    inject()
    iframe.addEventListener('load', () => inject())
  } catch (e) {}
}

The problem is:

// This line attempts to inject inline script blocks
script.textContent = `;(${detectIframeApp.toString()})(window, true)`
iframe.contentDocument.documentElement.appendChild(script)

In chrome extension Manifest V3, there is no way to declare inline script as safe, CSP will prevent code injection and throw errors.

Can the injection method of the code be changed to external code?

Start by locating injectVueHookToIframe and reproducing the issue in a Chrome extension using Manifest V3 CSP. Trace the inline script creation and determine an external-code injection approach that avoids CSP violations; done means the Vue devtools iframe hook works without the reported error.