Add web browsing capabilities to Cloudflare Workers

Integrate Browserbase with Cloudflare Workers

1

Get your API Key

Go over the Dashboard’s Settings tab:

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

2

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.

3

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

4

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">

5

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

6

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/"}