DEV Community

Shin'ya Ueoka
Shin'ya Ueoka

Posted on • Edited on

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

Screenshot of playwright-webextext

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


Enter fullscreen mode Exit fullscreen mode

Or install with yarn:



$ yarn add playwright-webextext


Enter fullscreen mode Exit fullscreen mode

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/");
})();


Enter fullscreen mode Exit fullscreen mode

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,
});

Enter fullscreen mode Exit fullscreen mode




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/");

// ...
});

Enter fullscreen mode Exit fullscreen mode




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:

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.

Top comments (0)