How to add a Chrome Extension using Puppeteer or Chrome DevTools Protocol?

Other Questions Puppeteer
1

Hey folks! I’m trying to figure out how to install a Chrome extension using Puppeteer or the Chrome DevTools Protocol. I’ve got a script that launches a new Chrome window, but I’m getting an error when I try to navigate to the extension’s page.

Here’s a simplified version of what I’m working with:

const browser = await puppeteer.launch({
  headless: false,
  args: ['--remote-debugging-port=9999']
});

const page = await browser.newPage();
await page.goto('chrome-extension://abcdefghijklmnop/index.html');

When I run this, I get a net::ERR_BLOCKED_BY_CLIENT error. I think it’s because the extension isn’t installed or enabled in the browser Puppeteer is controlling.

Does anyone know how to install or enable a Chrome extension programmatically using Puppeteer or the Chrome DevTools Protocol? I’ve been scratching my head over this for a while now. Any help would be awesome!

2

I’ve actually dealt with this issue before when working on a project that required automated browser testing with extensions. The key is to use the --load-extension flag when launching the browser with Puppeteer.

Here’s how I modified my script to make it work:

const path = require('path');
const extensionPath = path.join(__dirname, 'path/to/your/extension');

const browser = await puppeteer.launch({
  headless: false,
  args: [
    `--load-extension=${extensionPath}`,
    '--remote-debugging-port=9999'
  ]
});

Make sure you have the extension files locally and provide the correct path. This approach worked for me, allowing the extension to be loaded and accessed within the Puppeteer-controlled browser.

One caveat: this method only works with unpacked extensions. If you’re trying to use a packaged extension from the Chrome Web Store, you’ll need a different approach, possibly involving the Chrome DevTools Protocol directly.

3

I’ve encountered a similar challenge in my automation projects. One effective solution is to utilize the Chrome command line switches when launching the browser with Puppeteer. Specifically, you can use the ‘–load-extension’ flag to load an unpacked extension.

Here’s an example of how to modify your code:

const extensionPath = '/path/to/your/extension';
const browser = await puppeteer.launch({
  headless: false,
  args: [`--load-extension=${extensionPath}`, '--remote-debugging-port=9999']
});

Remember to replace ‘/path/to/your/extension’ with the actual path to your extension’s directory. This approach should allow you to access the extension’s pages without encountering the ERR_BLOCKED_BY_CLIENT error.

Keep in mind that this method only works for unpacked extensions. If you’re dealing with a packaged extension from the Chrome Web Store, you might need to explore alternative approaches using the Chrome DevTools Protocol.

4

hey there, ive run into this too! one thing u can try is using the --disable-extensions-except flag when launching chrome. it lets u load specific extensions. heres an example:

const browser = await puppeteer.launch({
headless: false,
args: [‘–disable-extensions-except=/path/to/extension’, ‘–load-extension=/path/to/extension’]
});

hope this helps!