DEV Community

Discussion on: How to use Puppeteer in a Chrome extension

Collapse
 
mattduffield profile image
Matt Duffield

Hi Travis,

Thanks for your response. I understand about both the content_scripts and background scripts but neither are necessary for running Puppeteer in the browser. I look forward to a working repo.

I was able to get it working but I had to have two instances of Chrome open. One to interact with the extension and the other to open the new page. Not sure why though?

Also, how do you debug the popup.js when the first thing you do in Puppeteer is create a new page for your automation? The very act of launching a new page closes the popup and the ability to debug that popup.js session.

Thanks again for your response and I look forward to your working repo.

Best regards,

Matt

Thread Thread
 
tchan profile image
Travis • Edited

From memory, passing data between content, background and popup scopes was a real pain in the ass when dealing with Chrome extensions.

I believe that's one of the limitations of puppeteer-web in general is that it opens up a new web page as it only has access to the connect api as opposed to launch which can open up a brand new tab in your original instance. It looks like the link I posted initially to the official docs is 404'd :/ but I found my initial info here.

When I was debugging popup.js, I just clicked my chrome extension next to the url bar to open up the popup.html viewport, right click -> inspect and added a breakpoint to my popup.js file. That way when the new browser instance launched via puppeteer, the popup window doesn't close. Let me know if you've already tried that, sorry I couldn't be more help.

Thread Thread
 
mattduffield profile image
Matt Duffield

Okay, so it seems like everything is working as I expected. I am using Chrome Canary for my testing and it seems to be working but the debugger tools are not behaving perfectly. I can debug though.

Thanks for following up.