在 Chrome 扩展程序中运行 Puppeteer
¥Running Puppeteer in Chrome extensions
Chrome 扩展程序环境与通常的 Node.JS 环境有很大不同,因此,在 chrome.debugger 中运行 Puppeteer 的支持目前处于实验阶段。如果你遇到错误,请提交问题 https://github.com/puppeteer/puppeteer/issues/new/choose。
¥Chrome extensions environment is significantly different from the usual Node.JS environment, therefore, the support for running Puppeteer in chrome.debugger is currently experimental. Please submit issues https://github.com/puppeteer/puppeteer/issues/new/choose if you encounted bugs.
Chrome 扩展程序允许通过 chrome.debugger
访问 Chrome DevTools 协议。chrome.debugger
提供对 CDP 的受限访问,并允许一次附加到一个页面。因此,Puppeteer 需要使用不同的传输,并且 Puppeteer 的视图仅限于单个页面。这意味着你可以与单个页面及其框架和工作者进行交互,但不能使用 Puppeteer 创建新页面。要创建新页面,你需要使用 chrome.tabs
API 并建立新的 Puppeteer 连接。
¥Chrome Extensions allow accessing Chrome DevTools Protocol via chrome.debugger
.
chrome.debugger
provides a restricted access to CDP and allows attaching to one
page at a time. Therefore, Puppeteer requires a different transport to be used and Puppeteer's view is limited to a single page. It means you can
interact with a single page and its frames and workers but cannot create new pages using Puppeteer. To create a new page you need to use the
chrome.tabs
API and establish a new Puppeteer connection.
如何在浏览器中运行 Puppeteer
¥How to run Puppeteer in the browser
要在扩展中运行 Puppeteer,首先需要使用打包器(如 rollup 或 webpack)生成与浏览器兼容的版本:
¥To run Puppeteer in an extension, first you need to produce a browser-compatible build using a bundler such as rollup or webpack:
-
导入 Puppeteer 时,使用 puppeteer-core
puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'
中特定于浏览器的入口点:¥When importing Puppeteer use the browser-specific entrypoint from puppeteer-core
puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'
:
import {
connect,
ExtensionTransport,
} from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js';
// Create a tab or find a tab to attach to.
const tab = await chrome.tabs.create({
url,
});
// Connect Puppeteer using the ExtensionTransport.connectTab.
const browser = await connect({
transport: await ExtensionTransport.connectTab(tab.id),
});
// You will have a single page on the browser object, which corresponds
// to the tab you connected the transport to.
const [page] = await browser.pages();
// Perform the usual operations with Puppeteer page.
console.log(await page.evaluate('document.title'));
browser.disconnect();
-
使用打包器构建扩展。例如,以下配置可以与 rollup 一起使用:
¥Build your extension using a bundler. For example, the following configuration can be used with 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'],
}),
],
};