在浏览器中运行 Puppeteer
Puppeteer 是一个强大的浏览器自动化工具,但您是否知道它也可以在浏览器本身内运行?这使您可以利用 Puppeteer 的功能来执行不需要 Node.js 特定功能的任务。
支持的功能
在浏览器中运行时,Puppeteer 提供各种功能,包括:
- WebSocket 连接:使用 WebSocket 建立与现有浏览器实例的连接。由于它依赖于 Node.js API,因此不支持直接启动或下载浏览器。
- 脚本评估:在浏览器上下文中执行 JavaScript 代码。
- 文档操作:生成当前网页的 PDF 和屏幕截图。
- 页面管理:创建、关闭和在不同的网页之间导航。
- Cookie 处理:检查、修改和管理浏览器中的 cookie。
- 网络控制:监视和拦截浏览器发出的网络请求。
如何在浏览器中运行 Puppeteer
要在浏览器中运行 Puppeteer,首先需要使用诸如 rollup 或 webpack 之类的打包器生成与浏览器兼容的构建版本。
- 导入 Puppeteer 时,请使用来自 puppeteer-core 的特定于浏览器的入口点
puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'
import puppeteer from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';
const browser = await puppeteer.connect({
browserWSEndpoint: wsUrl,
});
alert('Browser has ' + (await browser.pages()).length + ' pages');
browser.disconnect();
- 使用打包器构建您的应用程序。例如,以下配置可以与 rollup 一起使用:
import {nodeResolve} from '@rollup/plugin-node-resolve';
export default {
input: 'main.mjs',
output: {
format: 'esm',
dir: 'out',
},
// If you do not need to use WebDriver BiDi protocol,
// exclude chromium-bidi/lib/cjs/bidiMapper/BidiMapper.js to minimize the bundle size.
external: ['chromium-bidi/lib/cjs/bidiMapper/BidiMapper.js'],
plugins: [
nodeResolve({
// Indicate that we target a browser environment.
browser: true,
// Exclude any dependencies except for puppeteer-core.
// `npm install puppeteer-core` # To install puppeteer-core if needed.
resolveOnly: ['puppeteer-core'],
}),
],
};
注意
连接到实例时,请不要忘记包含有效的浏览器 WebSocket 端点。
- 将生成的 bundle 包含在网页中。