DEV Community

Cover image for Load chrome extensions in puppeteer
Ajay kumbhare
Ajay kumbhare

Posted on

Load chrome extensions in puppeteer

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();
})();
Enter fullscreen mode Exit fullscreen mode

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

 ignoreDefaultArgs: ["--disable-extensions"]
Enter fullscreen mode Exit fullscreen mode

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',
];
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
pavelloz profile image
Paweł Kowalski

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)

Collapse
 
ajaykumbhare profile image
Ajay kumbhare

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

Collapse
 
karim10k profile image
Karim Elmarharri

Great article , do you have this in git ?

Collapse
 
ajaykumbhare profile image
Ajay kumbhare • Edited

Hey Karim, No I haven't pushed this in git

Collapse
 
karim10k profile image
Karim Elmarharri

Im new to puppeteer , do you have a step by step tutorial written somewhere about handling the extension and how to open the extension url ?
thanks Ajay

Thread Thread
 
scrapyspiders profile image
Scrapy Spider

No, I haven't right now but will write one more blog on this next month

Thread Thread
 
ajaykumbhare profile image
Ajay kumbhare

No I haven't right now but will create one more blog in brief