Playwright: Loading Chrome Extensions

{
  "ExtensionSettings": {
    "ddkjiahejlhfcafbddmgiahcphecmpfh": {
      "name": "UBlock Origin",
      "installation_mode": "force_installed",
      "update_url": "https://clients2.google.com/service/update2/crx"
    },
     "gmbmikajjgmnabiglmofipeabaddhgne": {
      "name": "Save to Drive",
      "installation_mode": "force_installed",
      "update_url": "https://clients2.google.com/service/update2/crx"
    }
  }
}

#!/bin/bash

#Debug function, finds extensions if they were loaded somewhere else
# TODO change the extension ID to a valid one
find_folder () {
  echo "find extension:"
  find / -name '*kdfieneakcjfaiglcfcgkidlkmlijjnh*' -type d
  echo "find json:"
  find / -name '*managed_policies*' -type f
}

print_folder() {
 extensions_directory="/home/runner/.config/google-chrome/Default/Extensions/"
  for f in "$extensions_directory"/*; do
      basename "$f"
  done | awk 'END { printf("File count: %d", NR); } NF=NF'
}

configure_managed_policy () { 
  managed_folder_path="/etc/opt/chrome/policies/managed"
  # -p flag creates all parent folders as needed
  mkdir -p "$managed_folder_path"
  echo "$PWD"
  cp -v "./fixtures/managed_policies.json" "$managed_folder_path"
} 

echo "Create JSON"
configure_managed_policy


#run Chrome with xvfb for a virtual screen
#this should read the JSON files and load the extensions. Kill chrome to free resources
# -a automates the display ID so it doesnt conflict with Playwright later
#--no-sandbox is a Chrome flag to disable security when running as root
# & tells Bash to open a new command line. Otherwise the terminal will 'wait' for Chrome to close - which it wont ever do. 
# Instead, we open a new command line, wait 60 seconds for Chrome to (hopefully) finish loading extensions, then kill it
# NOTE: it is possible 60 seconds is not long enough. If the extensions are not loading, try increasing this number
echo "Open Chrome"
xvfb-run -a --server-args='-screen 0, 1024x768x16' google-chrome --no-sandbox & sleep 60
echo "Kill chrome"
pkill chrome

#after chrome is killed, the extension folders should be created and we should see all the extension folders
#Note if this is returning nothing, it may mean the extensions folder was not created in the right location
#  In that case, re-run 'find_folder' and a valid extension ID to find the extension folder
echo "Find extensions"
print_folder
#find_folder

import { test as base, chromium, type BrowserContext } from "@playwright/test";
import fs from "fs";
import path from "path";

export const test = base.extend<{
  context: BrowserContext;
  extensionId: string;
}>({
  context: async ({}, use) => {
    // Generate a list of extension paths from the extensions directory
    // Folders have a fixed format
    // e.g. /extensions/[extensionName]/[version]
    const extensionPaths: string[] = [];
    const extensionParentFolders = fs
      .readdirSync(
        path.normalize(
          "/home/runner/.config/google-chrome/Default/Extensions/"
        ),
        {
          withFileTypes: true,
        }
      )
      .filter((parent) => parent.isDirectory())
      .map((parent) => parent.name);

    console.log("ExtensionParentFolders: " + extensionParentFolders.join(","));

    extensionParentFolders.forEach((folder) => {
      const versionFolder = fs
        .readdirSync(
          path.join(
            "/home/runner/.config/google-chrome/Default/Extensions/" + folder
          ),
          {
            withFileTypes: true,
          }
        )
        .filter((version) => version.isDirectory())
        .map((version) => version.name);

      console.log("VersionFolder: " + versionFolder.join(","));

      if (versionFolder.length > 0) {
        extensionPaths.push(
          path.join(
            "/home/runner/.config/google-chrome/Default/Extensions/" +
              folder +
              "/" +
              versionFolder[0]
          )
        );
      }
    });
    console.log("Extensions to load: " + extensionPaths.join(","));

    // import the extensions into chromium
    // Chromium does not support loading extensions into headless environments
    // this does not impact CI but locally you'll notice a browser window open
    console.log("Setting context");

    const context = await chromium.launchPersistentContext("", {
      headless: false,
      channel: "chromium",
      args: [
        `--disable-extensions-except=${extensionPaths.join(",")}`,
        `--load-extension=${extensionPaths.join(",")}`,
        `--disable-component-extensions-with-background-pages`,
      ],
    });
    await use(context);
    await context.close();
  },
  extensionId: async ({ context }, use) => {
    // for manifest v3:
    let [background] = context.serviceWorkers();
    if (!background) background = await context.waitForEvent("serviceworker");

    const extensionId = background.url().split("/")[2];
    await use(extensionId);
  },
});
export const expect = test.expect;

import { test, expect } from "./fixtures/extension_fixture";

name: Extensions Tests
on:
  workflow_dispatch:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: sudo npm ci
      - name: Install Playwright Browsers
        run: sudo npx playwright install --with-deps
      - name: Install chrome extensions
        run: sudo sh ./fixtures/install-extensions.sh
      - name: Run Playwright tests
        run: sudo xvfb-run -a npx playwright test --grep "@extensions"