← Browser Run / browser-run

Začínáme

Cloudflare Browser Run (dříve Browser Rendering) umožňuje programově ovládat headless prohlížeč, takže můžete například pořizovat snímky obrazovky, generovat soubory PDF a provádět automatizované úlohy v prohlížeči. Tento průvodce vám pomůže vybrat správnou metodu integrace a začít s prvním projektem.

Browser Run nabízí dvě kategorie metod integrace:

• Rychlé akce: Jednoduché bezstavové úlohy prohlížeče, jako jsou screenshoty, PDF a scraping. Nasazení kódu není potřeba.
• Browser Sessions: Přímé ovládání prohlížeče přes Puppeteer, Playwright, CDP, nebo Stagehand. Nasaďte v rámci Cloudflare Workers nebo se připojte z libovolného prostředí přes CDP.

Quick Actions lze používat přes REST API nebo přímo z Cloudflare Workeru pomocí browser bindingu.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com"
  }' \
  --output "screenshot.png"

npm create cloudflare@latest -- browser-quick-action

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "browser-quick-action",
  "main": "src/index.ts",
  // Set this to today's date
  "compatibility_date": "2026-08-28",
  "browser": {
    "binding": "BROWSER"
  }
}

name = "browser-quick-action"
main = "src/index.ts"
# Set this to today's date
compatibility_date = "2026-08-28"

[browser]
binding = "BROWSER"

export default {
	async fetch(request, env) {
		return await env.BROWSER.quickAction("screenshot", {
			url: "https://example.com",
		});
	},
};

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("screenshot", {
			url: "https://example.com",
		});
	},
} satisfies ExportedHandler<Env>;

Mezi další endpointy Quick Actions patří:

• Načtení HTML
• Generování PDF
• Procházení webového obsahu

Podívejte se na úplný seznam Endpointy Quick Actions.

1. Zaregistrujte si účet Cloudflare ↗.
2. Nainstalujte Node.js ↗.

Cloudflare Workers poskytuje bezserverové prostředí pro spouštění kódu, ve kterém můžete vytvářet nové aplikace nebo rozšiřovat stávající, aniž byste museli konfigurovat nebo spravovat infrastrukturu. Vaše aplikace Worker slouží jako kontejner pro interakci s headless prohlížečem a provádění akcí, jako je pořizování snímků obrazovky.

Vytvořte nový projekt Worker s názvem browser-worker spuštěním:

npm create cloudflare@latest -- browser-worker

Při nastavení vyberte následující možnosti:

• Pro S čím byste chtěli začít?, vyberte Hello World example.
• Pro Jakou šablonu chcete použít?, vyberte Worker only.
• Pro Jaký jazyk chcete použít?, vyberte JavaScript / TypeScript.
• Pro Chcete používat git pro správu verzí?, vyberte Yes.
• Pro Chcete nasadit svou aplikaci?, vyberte No (před nasazením provedeme ještě několik změn).

Ve vašem browser-worker adresáři nainstalujte balíček Cloudflare fork Puppeteeru:

npm i -D @cloudflare/puppeteer

Browser Run lze používat spolu s dalšími vývojářskými produkty. Může být potřeba relační databáze, R2 bucket k archivaci procházených stránek a souborů, Durable Object k udržení instance prohlížeče aktivní a jejímu sdílení mezi více požadavky, nebo Queues ke zpracování vašich úloh asynchronně.

Pro účely tohoto příkladu použijeme Úložiště KV k ukládání snímků obrazovky do mezipaměti.

Vytvořte dva namespaces, jeden pro produkci a jeden pro vývoj.

npx wrangler kv namespace create BROWSER_KV_DEMO
npx wrangler kv namespace create BROWSER_KV_DEMO --preview

Poznamenejte si ID pro další krok.

Nakonfigurujte browser-worker projektu Konfigurační soubor Wrangler přidáním příznaku prohlížeče binding a Příznak kompatibility s Node.js. Bindings umožňují vašim Workerům interagovat se zdroji na vývojářské platformě Cloudflare. Váš prohlížeč binding nastavujete vy, tento návod používá název MYBROWSER. Browser bindings umožňují komunikaci mezi Workerem a headless prohlížečem, díky čemuž můžete provádět akce, jako je pořízení snímku obrazovky, generování PDF a další.

Aktualizujte Konfigurační soubor Wrangler s vazbou Browser Run API a jmennými prostory KV, které jste vytvořili:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "browser-worker",
	"main": "src/index.js",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"compatibility_flags": ["nodejs_compat"],
	"browser": {
		"binding": "MYBROWSER"
	},
	"kv_namespaces": [
		{
			"binding": "BROWSER_KV_DEMO",
			"id": "22cf855786094a88a6906f8edac425cd",
			"preview_id": "e1f8b68b68d24381b57071445f96e623"
		}
	]
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "browser-worker"
main = "src/index.js"
# Set this to today's date
compatibility_date = "2026-08-28"
compatibility_flags = [ "nodejs_compat" ]

[browser]
binding = "MYBROWSER"

[[kv_namespaces]]
binding = "BROWSER_KV_DEMO"
id = "22cf855786094a88a6906f8edac425cd"
preview_id = "e1f8b68b68d24381b57071445f96e623"

import puppeteer from "@cloudflare/puppeteer";

export default {
	async fetch(request, env) {
		const { searchParams } = new URL(request.url);
		let url = searchParams.get("url");
		let img;
		if (url) {
			url = new URL(url).toString(); // normalize
			img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
			if (img === null) {
				const browser = await puppeteer.launch(env.MYBROWSER);
				const page = await browser.newPage();
				await page.goto(url);
				img = await page.screenshot();
				await env.BROWSER_KV_DEMO.put(url, img, {
					expirationTtl: 60 * 60 * 24,
				});
				await browser.close();
			}
			return new Response(img, {
				headers: {
					"content-type": "image/jpeg",
				},
			});
		} else {
			return new Response("Please add an ?url=https://example.com/ parameter");
		}
	},
};

import puppeteer from "@cloudflare/puppeteer";

interface Env {
	MYBROWSER: Fetcher;
	BROWSER_KV_DEMO: KVNamespace;
}

export default {
	async fetch(request, env): Promise<Response> {
		const { searchParams } = new URL(request.url);
		let url = searchParams.get("url");
		let img: Buffer;
		if (url) {
			url = new URL(url).toString(); // normalize
			img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
			if (img === null) {
				const browser = await puppeteer.launch(env.MYBROWSER);
				const page = await browser.newPage();
				await page.goto(url);
				img = (await page.screenshot()) as Buffer;
				await env.BROWSER_KV_DEMO.put(url, img, {
					expirationTtl: 60 * 60 * 24,
				});
				await browser.close();
			}
			return new Response(img, {
				headers: {
					"content-type": "image/jpeg",
				},
			});
		} else {
			return new Response("Please add an ?url=https://example.com/ parameter");
		}
	},
} satisfies ExportedHandler<Env>;

Tento Worker vytvoří instanci prohlížeče pomocí Puppeteer, otevře novou stránku, přejde na adresu uvedenou v parametru 'url', pořídí snímek obrazovky stránky, uloží tento snímek do KV, prohlížeč zavře a jako odpověď vrátí obrázek JPEG se snímkem obrazovky.

Pokud váš Worker běží v produkčním prostředí, uloží snímek obrazovky do produkčního KV namespace. Pokud spouštíte wrangler dev, uloží snímek obrazovky do vývojářského KV namespace.

Pokud stejný url je vyžádáno znovu, použije se místo toho verze uložená v mezipaměti KV, pokud jí nevypršela platnost.

Spustit npx wrangler dev k lokálnímu testování vašeho Workeru.

Chcete-li vyzkoušet vytvoření prvního snímku obrazovky, přejděte na následující URL:

<LOCAL_HOST_URL>/?url=https://example.com

Spustit npx wrangler deploy k nasazení Workeru do globální sítě Cloudflare.

Chcete-li vytvořit první snímek obrazovky, přejděte na následující URL:

<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?url=https://example.com

• Podívejte se na všechny Endpointy Quick Actions
• Vyzkoušejte Playwright MCP
• Připojte se z libovolného prostředí pomocí CDP
• Zjistěte více o Browser Run limity a ceny

Pokud máte požadavky na nové funkce nebo jste narazili na chyby, sdílejte zpětnou vazbu přímo s týmem Cloudflare, a to prostřednictvím Komunita vývojářů Cloudflare na Discordu ↗.