critical does not work with a remote browser · addyosmani/critical#376

(7 留言) (0 反應) (0 負責人)JavaScript (9,902 star) (457 fork)batch import

enhancementhelp wanted

描述

Running something like this doesn't work.

const browser = puppeteer.connect({
    browserWSEndpoint: 'ws://127.0.0.1:3000',
});

critical.generate({
    src: 'https://www.google.com/',
    penthouse: {
        puppeteer: {
            getBrowser: () => browser,
        },
    },
});

This results in an error.

{
    "errorMessage": "Protocol error (Page.navigate): Cannot navigate to invalid URL",
    "errorType": "Error",
    "stackTrace": [
        "Error: Protocol error (Page.navigate): Cannot navigate to invalid URL",
        "at Promise (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\Connection.js:185:56)",
        "at new Promise (<anonymous>)",
        "at CDPSession.send (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\Connection.js:184:12)",
        "at navigate (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\FrameManager.js:119:39)",
        "at FrameManager.navigateFrame (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\FrameManager.js:96:7)",
        "at Frame.goto (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\FrameManager.js:407:37)",
        "at Frame.<anonymous> (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\helper.js:111:23)",
        "at Page.goto (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\Page.js:629:49)",
        "at Page.<anonymous> (C:\\Users\\user\\Projects\\project\\node_modules\\puppeteer-core\\lib\\helper.js:111:23)",
        "at loadPage (C:\\Users\\user\\Projects\\project\\node_modules\\penthouse\\lib\\core.js:54:30)",
        "at Promise (C:\\Users\\user\\Projects\\project\\node_modules\\penthouse\\lib\\core.js:384:29)",
        "at process._tickCallback (internal/process/next_tick.js:68:7)"
    ]
}

It tries to connect to 'file://C:\\Users\\user\\AppData\\Local\\Temp\\6df8ea397e6c2d676ff1b27a1e00f391\\79f06439b62759c632b77f71ef3d3cd0.html'.

Would it somehow be possible to get this working using a remote browser? I'm running a headless chrome instance in a docker container which I let puppeteer connect to and it obviously can't connect to a local temp file.

貢獻者指南

技術棧: javascriptnodejs
領域: frontendbuild systemperformance
議題類型: bug
難度: 3
預計時間: 1-3 hours
活動狀態: stale
清晰度: mostly clear
前置要求: Knowledge of PuppeteerUnderstanding of remote browsersFamiliarity with critical package
新手友善度: 40
研究方向: The issue is that critical generates a temporary HTML file and uses page.goto to load it, which fails for remote browsers that cannot access local files. Investigate penthouse's core.js where loadPage is called (line 54). Consider using page.setContent to pass HTML directly instead of navigating to a file. Also check how the getBrowser option is handled to ensure a remote browser is properly supported. The error stack trace points to FrameManager.navigateFrame, indicating a navigation to an invalid file URL. A potential fix could involve setting content via setContent after constructing the full HTML string. Look at existing PRs or comments for similar discussions.