Passing url of extension assets to the injected javascript code using data arguments on the script tag.

5 files changed, 71 insertions, 4 deletions

diff --git a/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js b/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js
index aaf256d..fd5a0a2 100644
--- a/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js
+++ b/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js
@@ -23,7 +23,10 @@ class CreateInjectedSharedModulesPlugin {
 						.map(sharedModule => `shared/${getFileNameHash(sharedModule, "shared")}.js`);
 
 					if (injectedSharedScripts.length > 0) {
-						const injectionCode = `${injectedSharedScripts.map(injectedScript => `$${getFileNameHash("script-injector", "shared", true)}.injectScriptHead("shared/${path.basename(injectedScript)}");`).join("")}`;
+						const scriptInjectorModuleName = getFileNameHash("script-injector", "shared", true);
+						const injectionCode = injectedSharedScripts
+							.map(injectedScript => `$${scriptInjectorModuleName}.injectScriptHead("shared/${path.basename(injectedScript)}");`)
+							.join("");
 						compilation.emitAsset(
 							`shared/${getFileNameHash("injected-shared-modules", "shared")}.js`,
 							new sources.RawSource(injectionCode)
diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
index da62bea..b14cd13 100644
--- a/config/webpack/plugins/create-manifest-webpack-plugin/index.js
+++ b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
@@ -98,7 +98,15 @@ class CreateManifestPlugin {
 
 					compilation.emitAsset(
 						"manifest.json",
-						new sources.RawSource(JSON.stringify(manifest, undefined, process.env.NODE_ENV === "production" ? undefined : "\t"))
+						new sources.RawSource(
+							JSON.stringify(
+								manifest,
+								undefined,
+								process.env.NODE_ENV === "production"
+									? undefined
+									: "\t"
+							)
+						)
 					);
 				}
 			);
diff --git a/config/webpack/plugins/create-rules-webpack-plugin.js b/config/webpack/plugins/create-rules-webpack-plugin.js
index 0dd05d7..6e31196 100644
--- a/config/webpack/plugins/create-rules-webpack-plugin.js
+++ b/config/webpack/plugins/create-rules-webpack-plugin.js
@@ -31,7 +31,15 @@ class CreateRulesPlugin {
 
 					compilation.emitAsset(
 						"rules.json",
-						new sources.RawSource(JSON.stringify(rules, undefined, process.env.NODE_ENV === "production" ? undefined : "\t"))
+						new sources.RawSource(
+							JSON.stringify(
+								rules,
+								undefined,
+								process.env.NODE_ENV === "production"
+									? undefined
+									: "\t"
+							)
+						)
 					);
 				}
 			);
diff --git a/config/webpack/plugins/inject-script-webpack-plugin.js b/config/webpack/plugins/inject-script-webpack-plugin.js
index 599871b..665d24e 100644
--- a/config/webpack/plugins/inject-script-webpack-plugin.js
+++ b/config/webpack/plugins/inject-script-webpack-plugin.js
@@ -2,6 +2,7 @@ const { sources } = require("webpack");
 const path = require("path");
 
 const { getFileNameHash } = webpackRequire("utils/filename-hash");
+const { getInjectedCode } = webpackRequire("utils/injected-code");
 
 class InjectScriptPlugin {
 	constructor(insertedBefore = false) {
@@ -19,8 +20,14 @@ class InjectScriptPlugin {
 				async assets => {
 					for (const assetName in assets) {
 						if (/\.js$/.test(assetName)) {
+							const injectedCodeResponse = getInjectedCode(compilation.getAsset(assetName).source.source())
+							const scriptInjectorModuleName = getFileNameHash("script-injector", "shared", true);
+							compilation.updateAsset(
+								assetName,
+								new sources.RawSource(injectedCodeResponse[0])
+							);
 							assets["scripts/" + path.basename(assetName)] = new sources.RawSource(
-								`$${getFileNameHash("script-injector", "shared", true)}.injectScriptHead("scripts/injected/${path.basename(assetName)}");`
+								`$${scriptInjectorModuleName}.injectScriptHead("scripts/injected/${path.basename(assetName)}", ${injectedCodeResponse[1]});`
 							);
 						}
 					}
diff --git a/config/webpack/utils/injected-code.js b/config/webpack/utils/injected-code.js
new file mode 100644
index 0000000..a4f88ac
--- /dev/null
+++ b/config/webpack/utils/injected-code.js
@@ -0,0 +1,41 @@
+const crypto = require("crypto");
+
+const getHash = url =>
+	crypto
+		.createHash("md5")
+		.update(url)
+		.digest("hex")
+		.substring(16);
+
+module.exports.getInjectedCode = code => {
+	const extensionAssets = {};
+	let i = 0;
+
+	while (true) {
+		i = code.indexOf("\"$l{", i);
+
+		if (i < 0) {
+			break;
+		}
+
+		const start = i;
+		const end = code.indexOf("}l$\"", i);
+
+		if (end <= 0) {
+			break;
+		}
+
+		const url = code.substring(start + 4, end).trim();
+		const urlHash = getHash(url);
+		code = code.substring(0, start) + `document.currentScript.getAttribute("data-${urlHash}")` + code.substring(end + 4);
+		extensionAssets[urlHash] = url;
+
+		i = end + 4;
+	}
+
+	const extensionAssetsCode = Object.entries(extensionAssets).map(
+		asset => `"${asset[0]}": chrome.runtime.getURL("${asset[1]}")`
+	).join(",");
+
+	return [code, `{${extensionAssetsCode}}`];
+};