From ccf73485cfba952451144d7841cbb3fac8368867 Mon Sep 17 00:00:00 2001 From: Arpit Chakladar <54011232+arpitchakladar@users.noreply.github.com> Date: Sat, 8 Apr 2023 11:46:35 +0530 Subject: Injecting shared modules for the injected scripts, further reusing code. --- ...reate-injected-shared-modules-webpack-plugin.js | 38 ++++++++++++++++++++++ .../create-manifest-webpack-plugin/index.js | 25 +++++++++----- .../webpack/plugins/create-rules-webpack-plugin.js | 3 +- .../plugins/inject-script-webpack-plugin.js | 3 +- 4 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js (limited to 'config/webpack/plugins') diff --git a/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js b/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js new file mode 100644 index 0000000..88959c5 --- /dev/null +++ b/config/webpack/plugins/create-injected-shared-modules-webpack-plugin.js @@ -0,0 +1,38 @@ +const path = require("path"); +const fs = require("fs"); +const { sources } = require("webpack"); + +const { getFileNameHash } = webpackRequire("utils/filename-hash"); + +class CreateInjectedSharedModulesPlugin { + constructor({ injectedSharedModulesImportedCount, sortedSharedModules }) { + this.injectedSharedModulesImportedCount = injectedSharedModulesImportedCount; + this.sortedSharedModules = sortedSharedModules; + } + + apply(compiler) { + compiler.hooks.compilation.tap("CreateInjectedSharedModulesPlugin", compilation => { + compilation.hooks.processAssets.tap( + { + name: "CreateInjectedSharedModulesPlugin", + stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL + }, + assets => { + const injectedSharedScripts = this.sortedSharedModules + .filter(sharedModule => this.injectedSharedModulesImportedCount[sharedModule] > 0) + .map(sharedModule => `"/shared/${getFileNameHash(sharedModule, "shared")}.js"`); + + if (injectedSharedScripts.length > 0) { + const injectionCode = `(async()=>{let e=(await Promise.all([${injectedSharedScripts.join(", ")}].map(async e=>(await fetch(chrome.runtime.getURL(e))).text()))).join(""),t=new MutationObserver(()=>{let n=document.querySelector("head > script:nth-child(54)");n&&(n.innerHTML=e+n.innerHTML,t.disconnect())});t.observe(document,{childList:!0,subtree:!0})})();`; + compilation.emitAsset( + `shared/${getFileNameHash("injected-shared-modules", "shared")}.js`, + new sources.RawSource(injectionCode) + ); + } + } + ); + }); + } +} + +module.exports = CreateInjectedSharedModulesPlugin; diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js index 2187a05..91ddf3e 100644 --- a/config/webpack/plugins/create-manifest-webpack-plugin/index.js +++ b/config/webpack/plugins/create-manifest-webpack-plugin/index.js @@ -7,8 +7,9 @@ const scripts = webpackRequire("utils/scripts"); const manifest = webpackRequire("plugins/create-manifest-webpack-plugin/manifest-template.json"); class CreateManifestPlugin { - constructor({ sharedModulesImportedCount, sortedSharedModules }) { + constructor({ sharedModulesImportedCount, injectedSharedModulesImportedCount, sortedSharedModules }) { this.sharedModulesImportedCount = sharedModulesImportedCount; + this.injectedSharedModulesImportedCount = injectedSharedModulesImportedCount; this.sortedSharedModules = sortedSharedModules; } @@ -17,8 +18,7 @@ class CreateManifestPlugin { compilation.hooks.processAssets.tap( { name: "CreateManifestPlugin", - stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE, - additionalAssets: true + stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL }, assets => { manifest.version = require(path.resolve(ROOT_DIR, "package.json")).version; @@ -33,12 +33,12 @@ class CreateManifestPlugin { const scriptRuntime = getScriptRuntimeFromType(scriptType); if (typeof arrangedScripts[scriptPath][scriptRuntime] === "undefined") { - arrangedScripts[scriptPath][scriptRuntime] = []; - } + arrangedScripts[scriptPath][scriptRuntime] = []; + } - arrangedScripts[scriptPath][scriptRuntime].push(`scripts/${getFileNameHash(scriptType, scriptPath)}.js`); + arrangedScripts[scriptPath][scriptRuntime].push(`scripts/${getFileNameHash(scriptType, scriptPath)}.js`); + } } - } manifest.content_scripts.push({ matches: [`*://banglarbhumi.gov.in/BanglarBhumi/*`], @@ -66,7 +66,7 @@ class CreateManifestPlugin { } } - const resources = []; + let resources = []; for (const assetName in assets) { if (/^assets\/.*\.(jpg|png|gif)$/.test(assetName)) { @@ -74,6 +74,15 @@ class CreateManifestPlugin { } } + const injectedSharedModules = this.sortedSharedModules + .filter(sharedModule => this.injectedSharedModulesImportedCount[sharedModule] > 0) + .map(sharedModule => `shared/${getFileNameHash(sharedModule, "shared")}.js`); + + if (injectedSharedModules.length > 0) { + resources = resources.concat(injectedSharedModules); + manifest.content_scripts[0].js.unshift(`shared/${getFileNameHash("injected-shared-modules", "shared")}.js`); + } + if (resources.length > 0) { manifest.web_accessible_resources = [ { diff --git a/config/webpack/plugins/create-rules-webpack-plugin.js b/config/webpack/plugins/create-rules-webpack-plugin.js index 4a02e2f..d02decd 100644 --- a/config/webpack/plugins/create-rules-webpack-plugin.js +++ b/config/webpack/plugins/create-rules-webpack-plugin.js @@ -8,8 +8,7 @@ class CreateRulesPlugin { compilation.hooks.processAssets.tap( { name: "CreateRulesPlugin", - stage: compiler.webpack.Compilation.PROCESS_ASSETS_ADDITIONAL, - additionalAssets: true + stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL }, assets => { const ruleFileNames = fs.readdirSync(path.resolve(SOURCE_DIR, "rules")); diff --git a/config/webpack/plugins/inject-script-webpack-plugin.js b/config/webpack/plugins/inject-script-webpack-plugin.js index c597e9a..0c42dfd 100644 --- a/config/webpack/plugins/inject-script-webpack-plugin.js +++ b/config/webpack/plugins/inject-script-webpack-plugin.js @@ -12,8 +12,7 @@ class InjectScriptPlugin { compilation.hooks.processAssets.tapPromise( { name: "InjectScriptPlugin", - stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE, - additionalAssets: true + stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE }, async assets => { for (const assetName in assets) { -- cgit v1.2.3