feat: add custom firefox extension to bypass csp

Author: talkenson

assets/[email protected]

@@ -19,7 +19,7 @@
   },
   "scripts": {
     "build": "tsc --build && npm run build-bundles && npm run copy-static && node scripts/create-client-scripts-symlinks.js",
-    "copy-static": "copyfiles 'src/browser/client-scripts/*' 'src/**/[!cache]*/autogenerated/**/*.json' build",
+    "copy-static": "copyfiles 'src/browser/client-scripts/*' 'src/**/[!cache]*/autogenerated/**/*.json' 'assets/*' build",
     "build-node-bundle": "esbuild ./src/bundle/cjs/index.ts --outdir=./build/src/bundle/cjs --bundle --format=cjs --platform=node --target=ES2021",
     "build-browser-bundle": "node ./src/browser/client-scripts/build.js",
     "build-bundles": "concurrently -c 'auto' 'npm:build-browser-bundle' 'npm:build-node-bundle --minify'",

package.json

@@ -14,6 +14,8 @@ import { BrowserConfig } from "../config/browser-config";
 import type { Callstack } from "./history/callstack";
 import type { WdProcess, WebdriverPool } from "../browser-pool/webdriver-pool";
 import { configure, setupBrowser } from "./queries";
+import { getFirefoxCSPAddOn } from "./queries/firefoxCSPAddOn";
+import { getNormalizedBrowserName } from "../utils/browser";
 
 const CUSTOM_SESSION_OPTS = [
     "outputDir",
@@ -103,6 +105,12 @@ export class Browser {
         this._addExtendOptionsMethod(this._session!);
     }
 
+    protected async _installFirefoxCSPAddOn(): Promise<string> {
+        if (getNormalizedBrowserName(this._session!.capabilities.browserName) !== "firefox") return Promise.resolve("");
+        const firefoxCSPAddOn = await getFirefoxCSPAddOn();
+        return this._session!.installAddOn(firefoxCSPAddOn, false);
+    }
+
     protected _addQueries(): void {
         configure({ testIdAttribute: this._config.testIdAttribute, asyncUtilTimeout: this._config.waitTimeout });
         setupBrowser(this._session!);

src/browser/browser.ts

@@ -84,6 +84,7 @@ export class ExistingBrowser extends Browser {
 
         this._extendStacktrace();
         this._addSteps();
+        await this._installFirefoxCSPAddOn();
         this._addQueries();
         this._addHistory();
 

src/browser/existing-browser.ts

@@ -73,6 +73,7 @@ export class NewBrowser extends Browser {
 
         this._extendStacktrace();
         this._addSteps();
+        await this._installFirefoxCSPAddOn();
         this._addQueries();
         this._addHistory();
 

src/browser/new-browser.ts

@@ -0,0 +1,7 @@
+import fs from "fs/promises";
+import path from "path";
+
+export const getFirefoxCSPAddOn = async (): Promise<string> => {
+    const extension = await fs.readFile(path.join(__dirname, "../../../assets/[email protected]"));
+    return extension.toString("base64");
+};