DEV Community

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.

Discussion (7)

pic
Editor guide
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 Author

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 Author • 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 Author

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