JavaScript How to write chrome extensions background.js to inject file with each new http request?

[bernd7]

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.
(since it for some unknown reason doesnt work with my intended website if the script jsut gets injected once at the start. it stops working at a specific point)
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 hopefully dont matter here:

Important is that currently the bg.js injects the write.js code just once into the site.
and I wanna change stuff so write.js code gets injected into the site each time a request is made.
(Cause I dont know, the site does tons of loading new stuff and such and suddenly the injected code just doesnt work anymore, so probably gets deleted somewhere along the way)

so I think I would have to have bg.js be something like

chrome.webRequest.onBeforeRequest.addListener(
chrome.scripting.executeScript(
    {
      target: {tabId: window.tabs[0].id},
      files: ['write.js'],
    });
);

or similar but I dont know how to properly write this, like what's the right syntax. or if it is even right in general.
basically whenever an onBeforeRequest event happens (which should logically be each time a request is about to be made) I wanna inject the write.js into the website.
how do I do this properly?
I already looked into the documentations but honestly I dont get them. They dont exactly explain stuff too well or show obviously where Arrays, Strings, etc. are used^but some abstract concepts.
for the most part, I am already confused when with chrome extensions you use {} [] and such and in what order.

 

[Antero360]

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.
(since it for some unknown reason doesnt work with my intended website if the script jsut gets injected once at the start. it stops working at a specific point)
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 hopefully dont matter here:

Important is that currently the bg.js injects the write.js code just once into the site.
and I wanna change stuff so write.js code gets injected into the site each time a request is made.
(Cause I dont know, the site does tons of loading new stuff and such and suddenly the injected code just doesnt work anymore, so probably gets deleted somewhere along the way)

so I think I would have to have bg.js be something like

chrome.webRequest.onBeforeRequest.addListener(
chrome.scripting.executeScript(
    {
      target: {tabId: window.tabs[0].id},
      files: ['write.js'],
    });
);

or similar but I dont know how to properly write this, like what's the right syntax. or if it is even right in general.
basically whenever an onBeforeRequest event happens (which should logically be each time a request is about to be made) I wanna inject the write.js into the website.
how do I do this properly?
I already looked into the documentations but honestly I dont get them. They dont exactly explain stuff too well or show obviously where Arrays, Strings, etc. are used^but some abstract concepts.
for the most part, I am already confused when with chrome extensions you use {} [] and such and in what order.

Hi there, is there a particular reason why you would want to inject a file on http request?