Load a custom Chrome Extension

A custom Chrome Extension is necessary for some use cases to enable advanced browser features. Extension support with headless Chrome has always been limited, but with Browserbase, it’s easy.

Upload your custom Extension

First, upload an extension to get its id.

You must upload a valid Chrome Extension in a .zip file format containing a manifest.json at the root.
Starting a session with a Chrome Extension will increase session creation time slightly, as we have to load the extension and restart the browser.

Create a Session

Then, create a new session using the Session API create session endpoint. Make sure to include the extensionId parameter.

Verify that the extension is loaded

Finally, let’s connect to the session using the session id to confirm your extension is loaded by using the following snippet:

import { chromium } from "playwright-core";

(async () => {
  const SESSION_ID = "<SESSION_ID>"

  // Specify the URL and expected title for the test
  const url = "https://www.google.com";

  // Launch a browser instance
  const browser = await chromium.connectOverCDP(
    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${SESSION_ID}`,
  );

  // Create a new page
  const pages = await browser.pages();
  const page = pages[0];
  // Navigate to the URL
  await page.goto(url);
  const element = await page
    .getByRole("heading", { name: "My custom chrome extension" })
    .textContent();

  // Ensure the browser is closed after the test
  await browser.close();
})().catch((error) => console.error(error.message));

Capabilities

Guides

Integrations