loading...
Cover image for Load chrome extensions in puppeteer

Load chrome extensions in puppeteer

ajaykumbhare profile image Ajay kumbhare ・2 min read

What is puppeteer?

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. You can do all things automatically which you are doing on the browser manually.

  • Generate screenshots and PDFs of pages
  • Crawl a website
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features
  • Test Chrome Extensions

Load chrome extensions

const puppeteer = require('puppeteer');

(async () => {
  const customArgs = [
    `--start-maximized`,
    `--load-extension=${process.env.extdarkreader}`
  ];
  const browser = await puppeteer.launch({
    defaultViewport: null,
    executablePath:process.env.chrome,
    headless: false,
    ignoreDefaultArgs: ["--disable-extensions","--enable-automation"],
    args: customArgs,
  });
  const page = await browser.newPage();
  await page.goto(`https://dev.to/`);
  await page.waitForNavigation();
  await page.close();
  await browser.close();
})();

By default, some functionalities are disabled in puppeteer so you can enable by assigning few arguments in ignoreDefaultArgs.

 ignoreDefaultArgs: ["--disable-extensions"]

ignoreDefaultArgs : > If true, then do not use puppeteer.defaultArgs(). If an array is given, then filter out the given default arguments. Dangerous option; use with care. Defaults to false.

After running above code got a dark theme of website https://dev.to

https://dev.to

Followings are default arguments are used in puppeteer.

const DEFAULT_ARGS = [
  '--disable-background-networking',
  '--enable-features=NetworkService,NetworkServiceInProcess',
  '--disable-background-timer-throttling',
  '--disable-backgrounding-occluded-windows',
  '--disable-breakpad',
  '--disable-client-side-phishing-detection',
  '--disable-component-extensions-with-background-pages',
  '--disable-default-apps',
  '--disable-dev-shm-usage',
  '--disable-extensions',
  // BlinkGenPropertyTrees disabled due to crbug.com/937609
  '--disable-features=TranslateUI,BlinkGenPropertyTrees',
  '--disable-hang-monitor',
  '--disable-ipc-flooding-protection',
  '--disable-popup-blocking',
  '--disable-prompt-on-repost',
  '--disable-renderer-backgrounding',
  '--disable-sync',
  '--force-color-profile=srgb',
  '--metrics-recording-only',
  '--no-first-run',
  '--enable-automation',
  '--password-store=basic',
  '--use-mock-keychain',
];

If you have any questions or if you want more posts on puppeteer please comment out on comment box.

Posted on by:

Discussion

markdown guide
 

Good stuff :)

Fun project would be to test sites with adblock vs no adblock, as a service. :)

BTW. I thought dev.to had drak theme built in (at least i have it dark and i didnt install anything external)

 

Yeah, I have just tried with dark reader but you can use other extensions too for testing purposes.