Puppeteer

Whether you are looking to get started, or already have an established codebase, Browserless aims to make the transition as easy as possible. At a high-level, you'll need to do the following:

Go over Nstbrowser Client Dash's API menu or go to: https://app.nstbrowser.io/app/api

If you haven't chosen a library yet we highly recommend puppeteer as it's fairly active and has many maintainers. It's also built by the developers of Chrome, so it's one of the highest quality libraries around. ```shell pnpm i puppeteer-core ``` ```shell yarn add puppeteer-core ``` ```shell npm i --save puppeteer-core ``` As an example let's write a screenshot service that takes a picture of the website and downloads it. We'll setup a route on the /image path and take a picture of a static webpage (though you can make this configurable if you wish):

Once we have Browserless account setup, we can simply "connect" to it in our application instead of launching local Chrome.

Screenshot service with Browserless
:::warning

Launch a browser by config. (the full config refers to LaunchNewBrowser)
The kernelMilestone parameter has a fixed value of 128 currently.
This proxy parameter is required.
:::

import express from "express";
import puppeteer from "puppeteer-core";

const token = "your token"; // required
const config = {
    proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
    // platform: 'windows', // support: windows, mac, linux
    // kernel: 'chromium', // only support: chromium
    // kernelMilestone: '128', // support: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // browser args
    // fingerprint: {
    //     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent supportted since v0.15.0
    // },
};
const query = new URLSearchParams({
    "x-api-key": token, // required
    "config": JSON.stringify(config),
});
const browserWSEndpoint = `https://less.nstbrowser.io/connect?${query.toString()}`;
const app = express();

const getBrowser = async () => puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
})

app.get("/image", async (req, res) => {
    let browser = null;
    await getBrowser()
        .then(async (browser) => {
            const page = await browser.newPage();
            await page.goto("https://nstbrowser.io");
            const screenshot = await page.screenshot({fullPage: true});
            res.end(screenshot, "binary");
            await page.close();
            await browser.close();
        })
        .catch((error) => {
            if (!res.headersSent) {
                res.status(400).send(error.message);
            }
        })
        .finally(() => browser && browser.close());
});

app.listen(8080, () => console.log("Listening on PORT: 8080"));

That's it! Now you don't have to worry about bundling Chrome or it's dependencies in production and can continue to develop your application.

Below is a sample cURL call that will use your new service to ensure it's all working:

$ curl -X GET -o temp.png http://localhost:8080/image

You can view the statistics of recent requests and the remaining session time in the Browserless menu of the Nstbrowser client. ![image.png](https://api.apidog.com/api/v1/projects/438468/resources/344338/image-preview)

Last modified: a month ago