Install your chrome extensions or firefox add-ons to the browser with playwright

Playwright is one of the most remarkable frameworks to achieve browser automation. It officially supports running Chromium, Firefox, and WebKit. How can we install chrome extensions or firefox add-ons to the browser on playwright? Playground introduces a practice for chromium on the document, but firefox is not.

Playwright-webextext stands to enable the installation of chrome extensions and firefox add-ons to the browser. It extends playground APIs and test fixtures that allow you to use chrome extensions or firefox add-ons from your local file.

Install

Playwright-webextext is distributed on npm. You can install it by npm:

$ npm install --save playwright-webextext

Or install with yarn:

$ yarn add playwright-webextext

Usage

withExtension()

This method extends playwright's core APIs. The method returns a custom BrowserType to load temporary extensions or add-ons from the local filesystem.

import { firefox } from "playwright";
import { withExtension } from "playwright-webextext";

(async () => {
  const browserTypeWithExtension = withExtension(
    // base browser type
    firefox,
    // path to a directory containing manifest.json
    "path/to/your/extensions",
  );
  // launch a browser
  const browser = await browserTypeWithExtension.launch();

  const page = await browser.newPage();
  await page.goto("https://example.com/");
})();

Note that using chrome extensions has two limitations: 1) the browser should run on headed mode, and 2) you should launch the browser with a persistent context.

const browser = await browserTypeWithExtension.launchPersistentContext("", {
  headless: false,
});

createFixture()

This method provides custom fixtures to run tests with a custom BrowserType. The method prepares a browser to install chrome extensions or firefox add-ons before tests start.

import { createFixture } from "playwright-webextext";

const { test, expect } = createFixture("path/to/your/extensions");

test("should launch browser with extensions", async ({ page }) => {
  await page.goto("https://example.com/");

  // ...
});

How does it work

Chromium

Chromium supports installing extensions via command-line options. Playwright-webextext launches a chromium browser with command-line options with extension paths. See the following document for more details:

• Chrome Extensions | Playwright

Firefox

Firefox provides a remote debugging server to control the browser via a remote debugging protocol. This protocol also enables installing a temporary add-on. Playwright-webextext installs add-ons by this protocol.