Avoid Headless Detection in Puppeteer

This is a follow along tutorial that helps you implement a measure to avoid headless detection in Puppeteer.

Step 1: Install necessary Libraries

The first step is to include 2 additional library in your project. Which can be done using the commands below.

npm install puppeteer-extra
npm install puppeteer-extra-plugin-stealth

Step 2: Import the Libraries

After the above libraries have been installed in your project. We have to use this in the project.

You might have some existing code that looks like the following:

import puppeteer from 'puppeteer' 
// or 
import puppeteer from 'puppeteer-core' Code language: JavaScript (javascript)

We have to replace the above import with the following:

// instead of 
// import puppeteer from 'puppeteer' 
// use the below imports
import puppeteer from 'puppeteer-extra'
import StealthPlugin from 'puppeteer-extra-plugin-stealth'Code language: JavaScript (javascript)

Now that we have necessary imports, let us change the code like below.

Step 3: Using the puppeteer-extra

Now that we have the required imports use the library like below in your code.

// the new addition is the .use() 
// it expects StealthPlugin
const browser = await puppeteer.use(StealthPlugin())
    .launch({
        headless: true, // Set to false if you need to see the browser UI
    });
// ...
// add your code to do stuff...
Code language: JavaScript (javascript)

Conclusion

That concludes our implementation to avoid headless detection in Puppeteer. And by that I end this short how to tutorial. For more info you can read about it more from the documentation link.