diff --git a/build-utils/inject-window-provider.ts b/build-utils/inject-window-provider.ts new file mode 100644 index 0000000000..97940ae46e --- /dev/null +++ b/build-utils/inject-window-provider.ts @@ -0,0 +1,55 @@ +import { Compilation, Compiler } from "webpack" + +const PLUGIN_NAME = "RuntimeDefine" +const WINDOW_PROVIDER_FILENAME = "window-provider.js" +const PROVIDER_BRIDGE_FILENAME = "provider-bridge.js" + +export default class InjectWindowProvider { + // eslint-disable-next-line class-methods-use-this + apply(compiler: Compiler): void { + compiler.hooks.thisCompilation.tap( + PLUGIN_NAME, + (compilation: Compilation) => { + compilation.hooks.processAssets.tap( + { + name: PLUGIN_NAME, + stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE, + }, + (assets) => { + let windowProviderSource = + // @ts-expect-error this exist + // eslint-disable-next-line no-underscore-dangle + assets[WINDOW_PROVIDER_FILENAME]._children[0]._value + + // need to encode so it can be used as a string + // in non optimised builds the source is a multi line string > `` needs to be used + // but ${ needs to be escaped separatly otherwise it breaks the `` + windowProviderSource = encodeURI(windowProviderSource).replaceAll( + "${", + "\\${" + ) + windowProviderSource = `\`${windowProviderSource}\`` + const providerBridgeSource = + // @ts-expect-error this exist + // eslint-disable-next-line no-underscore-dangle + assets[PROVIDER_BRIDGE_FILENAME]._children[0]._value + + // @ts-expect-error this exist + // eslint-disable-next-line no-underscore-dangle,no-param-reassign + assets[PROVIDER_BRIDGE_FILENAME]._children[0]._value = + providerBridgeSource.replace( + // eslint-disable-next-line no-useless-escape + `\"@@@WINDOW_PROVIDER@@@\"`, + windowProviderSource + ) + + // eslint-disable-next-line no-param-reassign + delete assets[WINDOW_PROVIDER_FILENAME] + // eslint-disable-next-line no-param-reassign + delete assets[`${WINDOW_PROVIDER_FILENAME}.map`] + } + ) + } + ) + } +} diff --git a/provider-bridge/index.ts b/provider-bridge/index.ts index d466db0651..c2c535edbb 100644 --- a/provider-bridge/index.ts +++ b/provider-bridge/index.ts @@ -52,21 +52,23 @@ export function connectProviderBridge(): void { export async function injectTallyWindowProvider(): Promise { try { - const windowProviderSourceResponse = await fetch( - browser.runtime.getURL("window-provider.js") - ) - const windowProviderSource = await windowProviderSourceResponse.text() + // This will be replaced by the InjectWindowProvider webpack plugin + const windowProviderSource = "@@@WINDOW_PROVIDER@@@" const container = document.head || document.documentElement const scriptTag = document.createElement("script") // this makes the script loading blocking which is good for us // bc we want to load before anybody has a chance to temper w/ the window obj scriptTag.setAttribute("async", "false") - // TODO: put env flag here so only dev env has sourcemap - scriptTag.textContent = windowProviderSource.replace( - "window-provider.js.map", - browser.runtime.getURL("window-provider.js.map") + + // need to decode the encodes string so it can be used as a source code + // in non optimised builds the source is a multi line string > `` was used + // but ${ needs to be escaped separatly otherwise it breaks the `` + scriptTag.textContent = decodeURI(windowProviderSource).replaceAll( + "\\${", + "${" ) + // TODO: fill in the provider state for window-provider container.insertBefore(scriptTag, container.children[0]) } catch (e) { diff --git a/webpack.config.ts b/webpack.config.ts index 9b761e2da9..b0cca56354 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -13,6 +13,7 @@ import LiveReloadPlugin from "webpack-livereload-plugin" import CopyPlugin, { ObjectPattern } from "copy-webpack-plugin" import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin" import WebExtensionArchivePlugin from "./build-utils/web-extension-archive-webpack-plugin" +import InjectWindowProvider from "./build-utils/inject-window-provider" const supportedBrowsers = ["brave", "chrome", "edge", "firefox", "opera"] @@ -58,6 +59,7 @@ const baseConfig: Configuration = { }, }, plugins: [ + new InjectWindowProvider(), new Dotenv({ defaults: true, systemvars: true,