在 Chrome 扩展中运行 Puppeteer

⚠️警告

Chrome 扩展环境与常规的 Node.JS 环境有显著不同，因此，目前在 chrome.debugger 中运行 Puppeteer 的支持是实验性的。如果遇到 bug，请提交 issue：https://github.com/puppeteer/puppeteer/issues/new/choose。

Chrome 扩展允许通过 chrome.debugger 访问 Chrome DevTools 协议。 chrome.debugger 提供对 CDP 的受限访问，并允许一次附加到一个页面。因此，Puppeteer 需要使用不同的传输，并且 Puppeteer 的视图仅限于单个页面。这意味着你可以与单个页面及其框架和工作线程交互，但不能使用 Puppeteer 创建新页面。要创建新页面，你需要使用 chrome.tabs API 并建立新的 Puppeteer 连接。

如何在 Chrome 扩展中运行 Puppeteer

ℹ️注意

完整的示例参见 https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-extension。

要在扩展中运行 Puppeteer，首先需要使用打包工具（如 rollup 或 webpack）生成浏览器兼容的构建：

导入 Puppeteer 时，请使用 puppeteer-core 中面向浏览器的入口点 puppeteer-core/lib/puppeteer/puppeteer-core-browser.js'：

import {
  connect,
  ExtensionTransport,
} from 'puppeteer-core/lib/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 使用：

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/bidiMapper/BidiMapper.js to minimize the bundle size.
  external: ['chromium-bidi/lib/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'],
    }),
  ],
};