|
|
|
|
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[36175],{51253:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>u,contentTitle:()=>s,default:()=>c,frontMatter:()=>i,metadata:()=>p,toc:()=>a});var t=r(85893),o=r(11151);const i={},s="Running Puppeteer in the browser",p={id:"guides/running-puppeteer-in-the-browser",title:"Running Puppeteer in the browser",description:"Puppeteer is a powerful tool for automating browsers, but did you know it can also run within a browser itself? This enables you to leverage Puppeteer's capabilities for tasks that don't require Node.js specific features.",source:"@site/../docs/guides/running-puppeteer-in-the-browser.md",sourceDirName:"guides",slug:"/guides/running-puppeteer-in-the-browser",permalink:"/next/guides/running-puppeteer-in-the-browser",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"docs",previous:{title:"Files",permalink:"/next/guides/files"},next:{title:"Running Puppeteer in Chrome extensions",permalink:"/next/guides/running-puppeteer-in-extensions"}},u={},a=[{value:"Supported Features",id:"supported-features",level:2},{value:"How to run Puppeteer in the browser",id:"how-to-run-puppeteer-in-the-browser",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"running-puppeteer-in-the-browser",children:"Running Puppeteer in the browser"}),"\n",(0,t.jsx)(n.p,{children:"Puppeteer is a powerful tool for automating browsers, but did you know it can also run within a browser itself? This enables you to leverage Puppeteer's capabilities for tasks that don't require Node.js specific features."}),"\n",(0,t.jsx)(n.h2,{id:"supported-features",children:"Supported Features"}),"\n",(0,t.jsx)(n.p,{children:"While running in the browser, Puppeteer offers a variety of functionalities including:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"WebSocket Connections: Establish connections to existing browser instances using WebSockets. Launching or downloading browsers directly is not supported as it relies on Node.js APIs."}),"\n",(0,t.jsx)(n.li,{children:"Script Evaluation: Execute JavaScript code within the browser context."}),"\n",(0,t.jsx)(n.li,{children:"Document Manipulation: Generate PDFs and screenshots of the current web page."}),"\n",(0,t.jsx)(n.li,{children:"Page Management: Create, close, and navigate between different web pages."}),"\n",(0,t.jsx)(n.li,{children:"Cookie Handling: Inspect, modify, and manage cookies within the browser."}),"\n",(0,t.jsx)(n.li,{children:"Network Control: Monitor and intercept network requests made by the browser."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"how-to-run-puppeteer-in-the-browser",children:"How to run Puppeteer in the browser"}),"\n",(0,t.jsx)(n.admonition,{type:"note",children:(0,t.jsxs)(n.p,{children:["See ",(0,t.jsx)(n.a,{href:"https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser",children:"https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser"})," for a complete example."]})}),"\n",(0,t.jsx)(n.p,{children:"To run Puppeteer in the browser, first you need to produce a browser-compatible build using a bundler such as rollup or webpack:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["When importing Puppeteer use the browser-specific entrypoint from puppeteer-core ",(0,t.jsx)(n.code,{children:"puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'"}),":"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"import puppeteer from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';\n\nconst browser = await puppeteer.connect({\n browserWSEndpoint: wsUrl,\n});\n\nalert('Browser has ' + (await browser.pages()).length + ' pages');\n\nbrowser.disconnect();\n"})}),"\n",(0,t.jsxs)(n.ol,{start:"2",children:["\n",(0,t.jsx)(n.li,{children:"Build your app using a bundler. For example, the following configuration can be used with rollup
|
