Working with chrome API/Chrome extension?

Hi, hope someone can help me. I wanna build some chrome extension that injects a certain javascript file into a website each time an http request is done.
currently my manifest.json file looks like this:

{
  "name": "Test3",
  "description": "blabla",
  "version": "1.0",
  "manifest_version": 3,
  "background": {"service_worker": "bg.js"},
  "permissions": ["scripting","webRequest"],
  "host_permissions": ["<all_urls>"]
}

Then we got the bg.js that looks like this:

chrome.runtime.onInstalled.addListener(async () => {
  const old = await chrome.scripting.getRegisteredContentScripts();
  if (old[0]) await chrome.scripting.unregisterContentScripts({ids:   
  old.map(s => s.id)});
  await chrome.scripting.registerContentScripts([{
    id: 'write',
    js: ['write.js'],
    matches: ['<all_urls>'],
    runAt: 'document_end',
    world: 'MAIN',
  }]);
});

and we finally have the write.js which’s content here doesnt matter.
I wanna change the bg.js in a way that it doesnt inject the write.js only once at the start but rather injects it each time a request is made.
it’s likely gonna need
chrome.webRequest.onBeforeRequest.addListener()
and chrome.scripting.executeScript() in some way but I jsut cant piece it together properly.
And documentations for chrome apis are a nightmare to understand, at least for me :confused:

Can you inspect in the chrome debugger and walk through your code with breakpoints in between your async calls so you can skip over them to see that the promise back finishes? It might reveal what’s going wrong?