Chrome 扩展程序

🌐 Chrome Extensions

Puppeteer 可用于测试 Chrome 扩展。

🌐 Puppeteer can be used for testing Chrome Extensions.

加载扩展程序

🌐 Load extensions

使用 LaunchOptions

🌐 Using LaunchOptions

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});

运行时

🌐 At runtime

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: true,
});

await browser.installExtension(pathToExtension);

后台上下文

🌐 Background contexts

你可以获取对扩展服务工作线程或后台页面的引用，这对于在扩展上下文中执行代码或强制终止服务工作线程非常有用。

🌐 You can get a reference to the extension service worker or background page, which can be useful for evaluating code in the extension context or forcefully terminating the service worker.

Service Worker (MV3)

🌐 Service worker (MV3)

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});

const workerTarget = await browser.waitForTarget(
  // Assumes that there is only one service worker created by the extension and its URL ends with background.js.
  target =>
    target.type() === 'service_worker' &&
    target.url().endsWith('background.js'),
);

const worker = await workerTarget.worker();

// Test the service worker.

await browser.close();

后台页面 (MV2)

🌐 Background page (MV2)

以下是获取扩展程序的后台页面句柄的代码，该扩展程序的源位于 ./my-extension ：

🌐 The following is code for getting a handle to the background page of an extension whose source is located in ./my-extension:

import puppeteer from 'puppeteer';
import path from 'path';

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  pipe: true,
  enableExtensions: [pathToExtension],
});
const backgroundPageTarget = await browser.waitForTarget(
  target => target.type() === 'background_page',
);
const backgroundPage = await backgroundPageTarget.page();

// Test the background page as you would any other page.

await browser.close();

弹出窗口

🌐 Popup

访问服务工作者 如上。然后：

🌐 Access the service worker as above. Then:

await worker.evaluate('chrome.action.openPopup();');

const popupTarget = await browser.waitForTarget(
  // Assumes that there is only one page with the URL ending with popup.html
  // and that is the popup created by the extension.
  target => target.type() === 'page' && target.url().endsWith('popup.html'),
);

const popupPage = await popupTarget.asPage();

// Test the popup page as you would any other page.

await browser.close();

内容脚本

🌐 Content scripts

内容脚本会像平常一样被注入。使用 browser.newPage() 和 page.goto() 导航到将注入内容脚本的页面。

🌐 Content scripts are injected as normal. Use browser.newPage() and page.goto() to navigate to a page where a content script will be injected.

它目前无法在内容脚本隔离环境中执行代码。

🌐 It is not currently possible to evaluate code in the content script isolated world.

了解更多

🌐 Learn more

要了解更多，请参阅 Chrome 开发者 的文档。

🌐 To learn more, see the documentation on Chrome for Developers.