Add web browsing capabilities to Cloudflare Workers

Get your API Key

Then copy your API Key directly from the input and set the BROWSERBASE_API_KEY environment variable.

Create a Cloudflare Worker Project

Create a new Cloudflare Worker project if you haven’t already.

  npm create cloudflare@latest

Cloudflare Workers currently only support JavaScript and TypeScript.

Using Browserbase with Puppeteer on Cloudflare Workers (Browser Rendering and Pages Functions) requires you to be on Cloudflare’s Paid Plan.

Install Cloudflare's Puppeteer NPM Package

Cloudflare Workers uses their dedicated npm package for Puppeteer.

This is a fork of the original Puppeteer package, but with minimal changes to support Cloudflare Workers.

  npm install @cloudflare/puppeteer

Configure your `wrangler.toml` file

Below is an example of what your wrangler.toml file should look like.

You can find your API Key and Project ID by going back to step 1.

wrangler.toml

name = "browserbase-cloudflare-workers"
main = "src/index.ts"
compatibility_date = "2024-06-10"
compatibility_flags = ["nodejs_compat"]

[vars]
BROWSERBASE_API_KEY = <"your-api-key">

Update your Cloudflare Worker to use Browserbase

Running your existing code with Browserbase works the same as using normal Cloudflare Workers, with a few line changes:

src/index.ts

import puppeteer from "@cloudflare/puppeteer";

interface Env {
    BROWSERBASE_API_KEY: String;
}

export default {
    async fetch(request: Request, env: Env): Promise<Response> {
        const browser = await puppeteer.connect({
            browserWSEndpoint: `wss://connect.browserbase.com?apiKey=${env.BROWSERBASE_API_KEY}`
        });

        const pages = await browser.pages();
        const page = pages[0];
        await page.goto("https://www.browserbase.com");

        const currentUrl = page.url();

        await page.close();
        await browser.close();
        return new Response(JSON.stringify({ currentUrl }), {
            headers: { 'content-type': 'application/json' }
        });
    }
}

Deploy your Cloudflare Worker

Deploy your Cloudflare Worker to Cloudflare:

  npm run deploy

You should see a URL that looks something like this:

  https://{worker-name}.{subdomain}.workers.dev

Click on the link and you’ll see the current URL of the page that was rendered.

{"currentUrl":"https://www.browserbase.com/"}

Capabilities

Guides