Refactoring code.

Only using hashes for output file names.
Using singleton pattern to store the callbacks for observeDOM, and only one MutationObserver.

7 files changed, 60 insertions, 26 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 206eea1..010a51f 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -6,6 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 global.ROOT_DIR = path.resolve(__dirname, "..");
 global.CONFIG_DIR = path.resolve(ROOT_DIR, "config");
 global.SOURCE_DIR = path.resolve(ROOT_DIR, "src");
+global.production = process.env.NODE_ENV === "production";
 
 global.webpackRequire = modulePath => require(path.resolve(CONFIG_DIR, "webpack", modulePath));
 
@@ -21,24 +22,38 @@ const scripts = webpackRequire("utils/scripts");
 const sharedModules = webpackRequire("utils/shared-modules");
 
 const uninjectedScriptEntries = {};
-const injectedScriptEntries = {};
+const injectedAfterScriptEntries = {};
+const injectedBeforeScriptEntries = {};
 const sharedModuleEntries = {};
 const sharedModuleExternals = {};
 
 for (const scriptPath in scripts) {
 	for (const scriptType in scripts[scriptPath]) {
 		const currentScripts = scripts[scriptPath][scriptType];
-		const scriptEntries = scriptType.startsWith("injected") ? injectedScriptEntries : uninjectedScriptEntries;
+		let scriptEntries;
+
+		switch (scriptType) {
+		case "injected":
+			scriptEntries = injectedAfterScriptEntries;
+			break;
+
+		case "injected-before":
+			scriptEntries = injectedBeforeScriptEntries;
+			break;
+
+		default:
+			scriptEntries = uninjectedScriptEntries;
+		}
 
 		scriptEntries[`${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(scriptType, scriptPath)}.js`
 		};
 	}
 }
 
 for (const sharedModule of sharedModules) {
-	const sharedModuleNameHash = getFileNameHash(sharedModule);
+	const sharedModuleNameHash = getFileNameHash(sharedModule, "shared");
 	sharedModuleEntries[sharedModule] = {
 		import: path.resolve(SOURCE_DIR, "shared", sharedModule),
 		filename: `shared/${sharedModuleNameHash}.js`
@@ -110,17 +125,28 @@ const uninjectedScriptConfiguration = merge(
 	}
 );
 
-const injectedScriptConfiguration = merge(
+const injectedAfterScriptConfiguration = merge(
 	commonOptions,
 	scriptOptions,
 	{
-		entry: injectedScriptEntries,
+		entry: injectedAfterScriptEntries,
 		plugins: [
 			new InjectScriptPlugin()
 		]
 	}
 );
 
+const injectedBeforeScriptConfiguration = merge(
+	commonOptions,
+	scriptOptions,
+	{
+		entry: injectedBeforeScriptEntries,
+		plugins: [
+			new InjectScriptPlugin(true)
+		]
+	}
+);
+
 const sharedModulesConfiguration = merge(
 	commonOptions,
 	ecmaScriptModuleOptions,
@@ -137,6 +163,7 @@ const sharedModulesConfiguration = merge(
 
 module.exports = [
 	uninjectedScriptConfiguration,
-	injectedScriptConfiguration,
+	injectedAfterScriptConfiguration,
+	injectedBeforeScriptConfiguration,
 	sharedModulesConfiguration
 ];
diff --git a/config/webpack/loader/dynamic-imports-loader.js b/config/webpack/loader/dynamic-imports-loader.js
index 06f9704..12eb5b7 100644
--- a/config/webpack/loader/dynamic-imports-loader.js
+++ b/config/webpack/loader/dynamic-imports-loader.js
@@ -5,18 +5,18 @@ const sharedModules = webpackRequire("utils/shared-modules.js");
 
 module.exports = source => {
 	const manager = new ImportManager(source);
-
 	let modified = false;
 
 	for (const unit of manager.imports.es6.units) {
 		const moduleIndex = sharedModules.indexOf(unit.module.name);
+
 		if (moduleIndex >= 0 && unit.type === "es6") {
 			const importedModuleNames = unit.members.entities
 				.map(entity => `\t${entity.name}`)
 				.concat(unit.defaultMembers.entities.map(entity => `\tdefault: ${entity.name}`))
 				.join(",\n");
 
-			const importStatement = `const {\n${importedModuleNames}\n} = await import(/* webpackIgnore: true */ "/shared/${getFileNameHash(sharedModules[moduleIndex])}.js");\n`;
+			const importStatement = `const {\n${importedModuleNames}\n} = await import(/* webpackIgnore: true */ "/shared/${getFileNameHash(sharedModules[moduleIndex], "shared")}.js");\n`;
 
 			unit.methods = {
 				makeUntraceable() {}
diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
index 4ab363f..785d604 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(scriptType, scriptPath)}.js`],
 								run_at: getScriptRuntimeFromType(scriptType)
 							});
 						}
@@ -44,7 +44,7 @@ class CreateManifestPlugin {
 					}
 
 					for (const sharedModule of sharedModules) {
-						resources.push(`shared/${getFileNameHash(sharedModule)}.js`);
+						resources.push(`shared/${getFileNameHash(sharedModule, "shared")}.js`);
 					}
 
 					if (resources.length > 0) {
diff --git a/config/webpack/plugins/inject-script-webpack-plugin.js b/config/webpack/plugins/inject-script-webpack-plugin.js
index 862b3f0..c597e9a 100644
--- a/config/webpack/plugins/inject-script-webpack-plugin.js
+++ b/config/webpack/plugins/inject-script-webpack-plugin.js
@@ -3,6 +3,10 @@ const { sources } = require("webpack");
 const { getInjectionCode } = webpackRequire("utils/get-injection-code");
 
 class InjectScriptPlugin {
+	constructor(insertedBefore = false) {
+		this.insertedBefore = insertedBefore;
+	}
+
 	apply(compiler) {
 		compiler.hooks.compilation.tap("InjectScriptPlugin", compilation => {
 			compilation.hooks.processAssets.tapPromise(
@@ -13,21 +17,15 @@ class InjectScriptPlugin {
 				},
 				async assets => {
 					for (const assetName in assets) {
-						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) {
+						if (/\.js$/.test(assetName)) {
 							compilation.updateAsset(
 								assetName,
-								new sources.RawSource(getInjectionCode(compilation.getAsset(assetName).source.source(), injected_before))
+								new sources.RawSource(
+									getInjectionCode(
+										compilation.getAsset(assetName).source.source(),
+										this.insertedBefore
+									)
+								)
 							);
 						}
 					}
diff --git a/config/webpack/utils/file-name-hash.js b/config/webpack/utils/file-name-hash.js
index e3988a9..889e9a4 100644
--- a/config/webpack/utils/file-name-hash.js
+++ b/config/webpack/utils/file-name-hash.js
@@ -1,3 +1,11 @@
 const crypto = require("crypto");
 
-module.exports.getFileNameHash = fileName => crypto.createHash("md5").update(fileName).digest("hex").substring(16);
+module.exports.getFileNameHash = (fileName, prefix) => {
+	const finalFileName = `${prefix}-${fileName}`;
+	const hash = crypto
+		.createHash("md5")
+		.update(finalFileName)
+		.digest("hex");
+
+	return production ? hash : `${fileName}-${hash.substring(16)}`;
+};
diff --git a/config/webpack/utils/scripts.js b/config/webpack/utils/scripts.js
index 2196737..427aaab 100644
--- a/config/webpack/utils/scripts.js
+++ b/config/webpack/utils/scripts.js
@@ -5,6 +5,7 @@ const formattedScripts = {};
 
 for (const scriptType in scripts) {
 	const currentScripts = scripts[scriptType];
+
 	for (const scriptName in currentScripts) {
 		const scriptPath = currentScripts[scriptName];
 		formattedScripts[scriptPath] = formattedScripts[scriptPath] || {};
diff --git a/config/webpack/utils/shared-modules.js b/config/webpack/utils/shared-modules.js
index f10d4a1..974145f 100644
--- a/config/webpack/utils/shared-modules.js
+++ b/config/webpack/utils/shared-modules.js
@@ -3,6 +3,6 @@ const fs = require("fs");
 
 const sharedModules = fs.readdirSync(path.resolve(SOURCE_DIR, "shared"))
 	.filter(sharedModule => !sharedModule.endsWith("import-shared.js"))
-	.map(sharedModule => sharedModule.substring(0, sharedModule.length - 3));4
+	.map(sharedModule => sharedModule.substring(0, sharedModule.length - 3));
 
 module.exports = sharedModules;