Using webRequest API to intercept script requests, edit them and send them back

Question

As the title says, I'm trying to intercept script requests from the user's page, make a GET request to the script url from the background, add a bit of functionality and send it back to the user.

A few caveats:

• I don't want to do this with every script request
• I still have to guarantee that the script tags are executed in the original order

So far I came with two solutions, none of which work properly. The basic code:

chrome.webRequest.onBeforeRequest.addListener(
  function handleRequest(request) {
    // First I make the get request for the script myself SYNCHRONOUSLY,
    // because the webRequest API cannot handle async.
    const syncRequest = new XMLHttpRequest();
    syncRequest.open('GET', request.url, false);
    syncRequest.send(null);
    const code = syncRequest.responseText;
  },
  { urls: ['<all_urls>'] },
  ['blocking'],
);

Now once we have the code, there are two approaches that I've tried to insert it back into the page.

1. I send the code through a port to a content script, that will add it to the page inside a <script></script> tag. Along with the code, I also send an index to keep sure the scripts are inserted back into the page in the correct order. This works fine for my dummy website, but it breaks on bigger apps, like youtube, where it fails to load the image of most videos. Any tips on why this happens?

2. I return a redirect to a data url:

   if (condition) return { cancel: false }
   else return { redirectUrl: 'data:application/javascript; charset=utf-8,'.concat(alteredCode) };
   

This second options breaks the code formatting, sometimes removing the space, sometimes cutting it short. I'm not sure on the reason behind this behavior, it might have something to do with data url spec.

I'm stuck. I've researched pretty much every related answer on this website and couldn't find anything. Any help or information is greatly appreciated!

Thanks for your time!!!