如何在puppeteer-real-browser中使用puppeteer-extra-plugin-recaptcha？

之前使用puppeteer-extra时，我可以通过puppeteer-extra-plugin-recaptcha库的page.solveRecaptchas()轻松识别验证码。但切换到puppeteer-real-browser库后，其他功能正常，却无法再使用puppeteer-extra的插件，导致验证码处理失效。请问该如何编写代码实现两个库的同时使用？

以下是我当前遇到问题的代码：

import fs from 'fs';
import puppeteer from 'puppeteer-extra';
import { connect } from 'puppeteer-real-browser';
import Stealth from 'puppeteer-extra-plugin-stealth';
import anticaptcha from 'puppeteer-extra-plugin-recaptcha'
import axios from 'axios';

const start = async () => {
    try {
      
        connect({
          tf: false, 
          turnstile: true,
          args: [], 
          headless: 'auto', 
          customConfig: {},
          skipTarget: [],
          fingerprint: true,
          turnstile: true,
          connectOption: {}
          // proxy: {
          //     host: '<proxy-host>',
          //     port: '<proxy-port>',
          //     username: '<proxy-username>',
          //     password: '<proxy-password>'
          // }
      })
      .then(async response => {
        const { page, browser, setTarget } = response
            setTarget({ status: true })
    

        puppeteer.use(Stealth());
        puppeteer.use(anticaptcha({
            provider: {
                id: '2captcha',
                token: 'apikey',
            },
            visualFeedback: true,
            throwOnError: true
        }));

    })   


    //My codes....


    
} catch (error) {
  console.error('error:', error.message);
}
};

解决方案 #

问题核心在于：puppeteer.use()是为puppeteer-extra自身创建的浏览器实例注册插件，而puppeteer-real-browser的connect()返回的是原生Puppeteer的浏览器/页面实例，不会自动继承puppeteer-extra的插件逻辑。需要手动将插件功能注入到返回的实例中：

1. 提前注册puppeteer-extra插件：不要在connect回调里调用puppeteer.use()，应该在代码最开始就完成插件注册。
2. 手动将插件绑定到返回的page实例：对于recaptcha插件，需要手动调用其初始化方法，把page.solveRecaptchas()挂载到返回的page对象上；对于stealth插件，需要在page上执行其注入脚本。

修改后的代码示例：

import fs from 'fs';
import puppeteer from 'puppeteer-extra';
import { connect } from 'puppeteer-real-browser';
import StealthPlugin from 'puppeteer-extra-plugin-stealth';
import RecaptchaPlugin from 'puppeteer-extra-plugin-recaptcha';
import axios from 'axios';

// 提前注册puppeteer-extra的插件
const stealth = StealthPlugin();
const recaptcha = RecaptchaPlugin({
    provider: {
        id: '2captcha',
        token: 'apikey', // 替换为你的2captcha密钥
    },
    visualFeedback: true,
    throwOnError: true
});
puppeteer.use(stealth);
puppeteer.use(recaptcha);

const start = async () => {
    try {
        const { page, browser, setTarget } = await connect({
            tf: false, 
            turnstile: true,
            args: [], 
            headless: 'auto', 
            customConfig: {},
            skipTarget: [],
            fingerprint: true,
            connectOption: {}
            // proxy: {
            //     host: '<proxy-host>',
            //     port: '<proxy-port>',
            //     username: '<proxy-username>',
            //     password: '<proxy-password>'
            // }
        });

        setTarget({ status: true });

        // 手动注入Stealth插件的脚本到当前page
        await stealth.onPageCreated(page);

        // 手动挂载Recaptcha插件的solveRecaptchas方法到page
        recaptcha.bindPage(page);

        // 现在可以正常使用page.solveRecaptchas()了
        // 示例：导航到带验证码的页面并处理
        await page.goto('https://example.com/with-recaptcha');
        await page.solveRecaptchas();

        // 你的其他代码逻辑
        // ...

    } catch (error) {
        console.error('error:', error.message);
    }
};

start();

关键说明 #

• stealth.onPageCreated(page)：手动触发stealth插件的页面初始化逻辑，将反检测脚本注入到当前page。
• recaptcha.bindPage(page)：把recaptcha插件的solveRecaptchas()等方法绑定到返回的page对象上，这样就能像之前一样调用该方法处理验证码。
• 避免混用async/await和.then()：原代码中同时使用了async函数和then回调，容易导致逻辑混乱，统一改用await处理异步操作更清晰。

内容的提问来源于stack exchange，提问作者Emre