Puppeteer的实现

// puppeteer：自动下载 Chrome
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();  // 使用自动下载的 Chrome

// puppeteer-core：使用已有的 Chrome
const puppeteerCore = require('puppeteer-core');
const browser = await puppeteerCore.launch({
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
});

// Puppeteer 各版本对应的 Chrome 版本（revisions 配置，示意）
module.exports = {
    chrome: '131.0.6778.204',  // Puppeteer 对应的 Chrome 版本
};

# 设置环境变量跳过下载
PUPPETEER_SKIP_DOWNLOAD=true npm install puppeteer

# 或在 .npmrc 中配置
puppeteer_skip_download=true

// puppeteer-core/lib/cjs/puppeteer/node/BrowserLauncher.js
async launch(options = {}) {
    // 1. 解析 Chrome 路径
    const executablePath = options.executablePath || this.executablePath;

    // 2. 构建启动参数
    const chromeArguments = [];
    if (!options.ignoreDefaultArgs) {
        chromeArguments.push(...this.defaultArgs(options));
    }
    if (options.args) {
        chromeArguments.push(...options.args);
    }

    // 3. 启动 Chrome 子进程
    // 使用 WebSocket（默认，--remote-debugging-port）或 Pipe（--remote-debugging-pipe）
    const usePipe = options.pipe === true;  // 默认 false，即 WebSocket 模式

    if (usePipe) {
        chromeArguments.push('--remote-debugging-pipe');
        const { 3: pipeWrite, 4: pipeRead } = spawnChrome(executablePath, chromeArguments);
        // 连接 Pipe
        const connection = new PipeConnection(pipeRead, pipeWrite);
        return Browser.create(connection, ...);
    } else {
        chromeArguments.push(`--remote-debugging-port=${port}`);
        const process = spawnChrome(executablePath, chromeArguments);
        // 等待调试端口就绪
        const connection = await WebSocketConnection.create(port);
        return Browser.create(connection, ...);
    }
}

defaultArgs(options = {}) {
    const args = [
        '--disable-background-networking',
        '--disable-background-timer-throttling',
        '--disable-backgrounding-occluded-windows',
        '--disable-breakpad',
        '--disable-component-extensions-with-background-pages',
        '--disable-component-update',
        '--disable-default-apps',
        '--disable-dev-shm-usage',
        '--disable-extensions',
        '--disable-features=TranslateUI',
        '--disable-hang-monitor',
        '--disable-ipc-flooding-protection',
        '--disable-popup-blocking',
        '--disable-prompt-on-repost',
        '--disable-renderer-backgrounding',
        '--disable-sync',
        '--enable-features=NetworkService,NetworkServiceInProcess',
        '--force-color-profile=srgb',
        '--metrics-recording-only',
        '--no-first-run',
        '--no-default-browser-check',
        '--password-store=basic',
        '--use-mock-keychain',
    ];

    if (options.headless !== false) {
        // v22+ 无头模式与有头模式行为一致（完整 Chrome，无 UI）
        args.push('--headless');
    }

    return args;
}

const puppeteer = require('puppeteer-core');

// 方式一：连接到已启动的 Chrome（WebSocket 模式）
const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:9222',
});

// 方式二：使用 WebSocket URL 连接
const browser = await puppeteer.connect({
    browserWSEndpoint: 'ws://127.0.0.1:9222/devtools/browser/ABC123',
});

// 方式三：自定义 Transport 连接（如 Pipe 双向流，需实现 ConnectionTransport 接口）
const browser = await puppeteer.connect({
    transport: new PipeTransport(pipeRead, pipeWrite),
});

// 连接后即可正常使用
const page = await browser.newPage();
await page.goto('https://example.com');

// Puppeteer API
await page.goto('https://example.com');

// 底层 CDP 命令
await connection.send('Page.enable');
await connection.send('Page.navigate', { url: 'https://example.com' });
// 等待 Page.loadEventFired 事件

// Puppeteer API
const title = await page.evaluate('document.title');
const href = await page.evaluate(() => location.href);

// 底层 CDP 命令（简单表达式）
await connection.send('Runtime.evaluate', {
    expression: 'document.title',
    returnByValue: true,
});

// 底层 CDP 命令（函数）
await connection.send('Runtime.callFunctionOn', {
    functionDeclaration: '() => location.href',
    returnByValue: true,
});

// Puppeteer API
await page.click('#submit-button');

// 底层 CDP 命令
// 1. 查找元素
const { nodeId } = await connection.send('DOM.querySelector', {
    nodeId: 1,
    selector: '#submit-button',
});

// 2. 获取元素位置
// content 是扁平数组 [x1,y1, x2,y2, x3,y3, x4,y4]，四个角按 左上/右上/右下/左下 排列
const { model } = await connection.send('DOM.getBoxModel', { nodeId });
const x = model.content[0] + (model.content[2] - model.content[0]) / 2;
const y = model.content[1] + (model.content[5] - model.content[1]) / 2;

// 3. 模拟鼠标按下
await connection.send('Input.dispatchMouseEvent', {
    type: 'mousePressed', x, y, button: 'left', clickCount: 1,
});

// 4. 模拟鼠标释放
await connection.send('Input.dispatchMouseEvent', {
    type: 'mouseReleased', x, y, button: 'left', clickCount: 1,
});

// Puppeteer API
await page.type('#search', 'hello world', { delay: 100 });

// 底层 CDP 命令（逐字符发送）
for (const char of 'hello world') {
    await connection.send('Input.dispatchKeyEvent', {
        type: 'keyDown',
        text: char,
    });
    await connection.send('Input.dispatchKeyEvent', {
        type: 'keyUp',
        text: char,
    });
    if (delay) await sleep(delay);
}

// Puppeteer API
const screenshot = await page.screenshot({ path: 'screenshot.png' });

// 底层 CDP 命令
const { data } = await connection.send('Page.captureScreenshot', {
    format: 'png',
    quality: 100,
});
const buffer = Buffer.from(data, 'base64');

// Puppeteer API
const element = await page.$('.content');
await page.waitForSelector('.content');

// 底层 CDP 命令
const { nodeId } = await connection.send('DOM.querySelector', {
    nodeId: 1,
    selector: '.content',
});

// waitForSelector 实际上是轮询
while (true) {
    const { nodeId } = await connection.send('DOM.querySelector', {
        nodeId: 1,
        selector: '.content',
    });
    if (nodeId) break;
    await sleep(100);
}

class PipeConnection {
    constructor(pipeRead, pipeWrite) {
        this._pipeRead = pipeRead;
        this._pipeWrite = pipeWrite;
        this._id = 0;
        this._callbacks = new Map();

        // 读取 CDP 消息
        this._readMessageLoop();
    }

    async _readMessageLoop() {
        while (true) {
            // 读取消息长度（4字节整数）
            const lengthBuffer = await readBytes(this._pipeRead, 4);
            const length = lengthBuffer.readInt32LE(0);

            // 读取消息内容
            const messageBuffer = await readBytes(this._pipeRead, length);
            const message = JSON.parse(messageBuffer.toString());

            this._handleMessage(message);
        }
    }

    send(method, params = {}) {
        const id = ++this._id;
        const message = JSON.stringify({ id, method, params });

        return new Promise((resolve, reject) => {
            this._callbacks.set(id, { resolve, reject });

            // 写入消息长度 + 内容
            const lengthBuffer = Buffer.alloc(4);
            lengthBuffer.writeInt32LE(message.length, 0);
            this._pipeWrite.write(lengthBuffer);
            this._pipeWrite.write(message);
        });
    }
}

class WebSocketConnection {
    constructor(ws) {
        this._ws = ws;
        // ... 同 PipeConnection 的消息处理逻辑
    }

    send(method, params = {}) {
        const id = ++this._id;
        const message = JSON.stringify({ id, method, params });

        return new Promise((resolve, reject) => {
            this._callbacks.set(id, { resolve, reject });
            this._ws.send(message);  // 直接发送 JSON
        });
    }
}

// Puppeteer API
await page.setRequestInterception(true);
page.on('request', (request) => {
    if (request.url().includes('ads')) {
        request.abort();  // 拦截广告请求
    } else {
        request.continue();  // 其他请求继续
    }
});

// 底层 CDP 命令
await connection.send('Fetch.enable', {
    patterns: [{ urlPattern: '*' }],
});

connection.on('Fetch.requestPaused', async (params) => {
    if (params.request.url.includes('ads')) {
        await connection.send('Fetch.failRequest', {
            requestId: params.requestId,
            errorReason: 'BlockedByClient',
        });
    } else {
        await connection.send('Fetch.continueRequest', {
            requestId: params.requestId,
        });
    }
});