Install your chrome extensions or firefox add-ons to the browser with playwright
Tags: webdev, playwright, typescript, javascript
Published: 2022-08-21 13:36:44

---
title: Install your chrome extensions or firefox add-ons to the browser with playwright 
published: true
description: 
tags: webdev, playwright, typescript, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

![Screenshot of playwright-webextext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqwe6574sp5hm3bhpev5.gif)
 

[Playwright](https://playwright.dev/) 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](https://playwright.dev/docs/chrome-extensions), but firefox is not.

[Playwright-webextext](https://github.com/ueokande/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](https://www.npmjs.com/package/playwright-webextext).  You can install it by `npm`:

```console
$ npm install --save playwright-webextext
```

Or install with `yarn`:

```console
$ 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.

```typescript
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.

```typescript
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.

```typescript
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][chrome-launch-switches].  Playwright-webextext launches a chromium browser with command-line options with extension paths.  See the following document for more details:

- [Chrome Extensions | Playwright](https://playwright.dev/docs/chrome-extensions)

[chrome-launch-switches]: https://sites.google.com/site/chromeappupdates/launch-switches

### 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.

[remote debugging protocol]: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html