Overriding the javascript on the page instead of locally replacing it.

6 files changed, 40 insertions, 23 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 19bd145..8e27b8a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -24,7 +24,7 @@ for (const scriptPath in scripts) {
 		const currentScripts = scripts[scriptPath][scriptType];
 		entries[`${scriptType} - "${scriptPath}"`] = {
 			import: inlineJavascript(currentScripts.map(script => `import "${path.resolve(SOURCE_DIR, "scripts", script)}";`).join("\n")),
-			filename: `scripts/${getFileNameHash(scriptPath)}/${scriptType}.js`
+			filename: `scripts/${getFileNameHash(scriptPath)}-${scriptType}.js`
 		};
 	}
 }
diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
index f0d9084..6984955 100644
--- a/config/webpack/plugins/create-manifest-webpack-plugin/index.js
+++ b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
@@ -29,7 +29,7 @@ class CreateManifestPlugin {
 
 							manifest.content_scripts.push({
 								matches,
-								js: [`scripts/${getFileNameHash(scriptPath)}/${scriptType}.js`],
+								js: [`scripts/${getFileNameHash(scriptPath)}-${scriptType}.js`],
 								run_at: getScriptRuntimeFromType(scriptType)
 							});
 						}
diff --git a/config/webpack/plugins/inject-script-webpack-plugin/index.js b/config/webpack/plugins/inject-script-webpack-plugin.js
index a0ee1f7..8d72ea2 100644
--- a/config/webpack/plugins/inject-script-webpack-plugin/index.js
+++ b/config/webpack/plugins/inject-script-webpack-plugin.js
@@ -1,7 +1,7 @@
 const { sources } = require("webpack");
 const terser = require("terser");
 
-const { getInjectionCode } = webpackRequire("plugins/inject-script-webpack-plugin/get-injection-code");
+const { getInjectionCode } = webpackRequire("utils/get-injection-code");
 
 class InjectScriptPlugin {
 	apply(compiler) {
@@ -14,10 +14,21 @@ class InjectScriptPlugin {
 				},
 				async assets => {
 					for (const assetName in assets) {
-						if (assetName.endsWith("injected.js")) {
+						let injected = false;
+						let injected_before = false;
+
+						if (assetName.endsWith("injected.js"))
+							injected = true;
+
+						else if (assetName.endsWith("injected-before.js")) {
+							injected = true;
+							injected_before = true;
+						}
+
+						if (injected) {
 							compilation.updateAsset(
 								assetName,
-								new sources.RawSource(getInjectionCode(compilation.getAsset(assetName).source.source()))
+								new sources.RawSource(getInjectionCode(compilation.getAsset(assetName).source.source(), injected_before))
 							);
 						}
 					}
diff --git a/config/webpack/plugins/inject-script-webpack-plugin/get-injection-code.js b/config/webpack/plugins/inject-script-webpack-plugin/get-injection-code.js
deleted file mode 100644
index 2993c44..0000000
--- a/config/webpack/plugins/inject-script-webpack-plugin/get-injection-code.js
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports.getInjectionCode = code => {
-	const escapeSequences = [["\b", "\\b"],
-		["\f", "\\f"],
-		["\n", "\\n"],
-		["\r", "\\r"],
-		["\t", "\\t"],
-		["\v", "\\v"]
-	];
-	let finalCode = code.replaceAll("`","\\`");
-
-	for (const escapeSequence of escapeSequences) {
-		finalCode = finalCode
-			.replaceAll(escapeSequence[1], "\\" + escapeSequence[1])
-			.replaceAll(escapeSequence[0], escapeSequence[1]);
-	}
-
-	return `(()=>{const o=new MutationObserver(()=>{let t=document.querySelector("head > script:nth-child(54)");if(t){let e=\`(()=>{${finalCode}})();\`;null==t.getAttribute("data-replaced")?(t.innerHTML=e,t.setAttribute("data-replaced","")):t.innerHTML+=e,o.disconnect()}});o.observe(document,{childList:!0,subtree:!0});})();`;
-};
diff --git a/config/webpack/utils/get-injection-code.js b/config/webpack/utils/get-injection-code.js
new file mode 100644
index 0000000..71afa93
--- /dev/null
+++ b/config/webpack/utils/get-injection-code.js
@@ -0,0 +1,23 @@
+module.exports.getInjectionCode = (code, front) => {
+	const escapeSequences = [
+		["\b", "\\b"],
+		["\f", "\\f"],
+		["\n", "\\n"],
+		["\r", "\\r"],
+		["\t", "\\t"],
+		["\v", "\\v"]
+	];
+	let finalCode = code.replaceAll("`","\\`");
+
+	for (const escapeSequence of escapeSequences) {
+		finalCode = finalCode
+			.replaceAll(escapeSequence[1], "\\" + escapeSequence[1])
+			.replaceAll(escapeSequence[0], escapeSequence[1]);
+	}
+
+	const concatenationCode = front
+		? "t.innerHTML=i+t.innerHTML"
+		: "t.innerHTML+=i";
+
+	return `(()=>{let e=new MutationObserver(()=>{let t=document.querySelector("head > script:nth-child(54)");if(t){let i=\`(()=>{${finalCode}})();\`;${concatenationCode},e.disconnect()}});e.observe(document,{childList:!0,subtree:!0})})();`;
+};
diff --git a/config/webpack/utils/script-runtime.js b/config/webpack/utils/script-runtime.js
index 8215ba2..f424168 100644
--- a/config/webpack/utils/script-runtime.js
+++ b/config/webpack/utils/script-runtime.js
@@ -2,6 +2,7 @@ module.exports.getScriptRuntimeFromType = scriptType => {
 	switch (scriptType) {
 		case "before":
 		case "injected":
+		case "injected-before":
 			return "document_start";
 
 		case "rendered":