Inject transformed JS in content script for Chromium compatibility

Author: leo60228

lib/background.js

@@ -1,24 +1,8 @@
 import browser from 'webextension-polyfill';
 import transform from './transform.js';
 
-function jsHandler(event) {
-    let filter = browser.webRequest.filterResponseData(event.requestId);
-
-    let buf = '';
-    let decoder = new TextDecoder('utf-8');
-    const encoder = new TextEncoder();
-
-    filter.ondata = event => {
-        buf += decoder.decode(event.data, { stream: true });
-    };
-
-    filter.onstop = () => {
-        const script = transform(buf);
-        filter.write(encoder.encode(script));
-        filter.disconnect();
-    };
-
-    return {};
+function jsHandler() {
+    return { cancel: true };
 }
 
 function requestCacheHandler(event) {
@@ -27,11 +11,25 @@ function requestCacheHandler(event) {
     };
 }
 
-const filter = {
-    urls: ['https://d35iw2jmbg6ut8.cloudfront.net/static/js/main.*.chunk.js']
-};
+async function transformRequestHandler(mainScriptFilename) {
+    const mainScriptUrl = `https://d35iw2jmbg6ut8.cloudfront.net/static/js/${mainScriptFilename}`;
 
-browser.webRequest.onBeforeRequest.addListener(jsHandler, filter, ['blocking']);
-browser.webRequest.onBeforeSendHeaders.addListener(requestCacheHandler, filter, ['blocking', 'requestHeaders']);
+    const req = await fetch(mainScriptUrl);
+    const origScript = await req.text();
+
+    const transformedScript = transform(origScript);
+
+    return transformedScript;
+}
+
+const urls = ['https://d35iw2jmbg6ut8.cloudfront.net/static/js/main.*.chunk.js']
+
+browser.webRequest.onBeforeRequest.addListener(jsHandler, {
+    urls,
+    types: ['script']
+}, ['blocking']);
+browser.webRequest.onBeforeSendHeaders.addListener(requestCacheHandler, { urls }, ['blocking', 'requestHeaders']);
 
 browser.webRequest.handlerBehaviorChanged();
+
+browser.runtime.onMessage.addListener(transformRequestHandler);

lib/content.js

@@ -1,5 +1,6 @@
 import scanElement from './scanElement.js';
 import { removeAttributes } from './addAttribute.js';
+import injectTransformed from './injectTransformed.js';
 import './style.css';
 
 async function observe(mutations) {
@@ -31,3 +32,5 @@ observer.observe(document.body, {
     characterData: true,
     characterDataOldValue: true
 });
+
+injectTransformed();

lib/injectTransformed.js

@@ -0,0 +1,14 @@
+import browser from 'webextension-polyfill';
+
+export default async function injectTransformed() {
+    const mainScript = document.querySelector('body > script:last-of-type');
+    const mainScriptUrl = mainScript.src;
+
+    const mainScriptFilename = mainScriptUrl.split('/').pop();
+
+    const transformedScript = await browser.runtime.sendMessage(mainScriptFilename);
+
+    const scriptElem = document.createElement('script');
+    scriptElem.text = transformedScript;
+    document.documentElement.prepend(scriptElem);
+}