I enjoyed reading your article. In looking at your manifest, see that you also have content_scripts and background but you don't provide any example as how they fit into everything. Would you mind providing a sample repo where we could look at all the moving parts?
I'll try editing the article when I have time, but content_script and background script are the building blocks for chrome extensions. I would recommend watching this video a better overview/primer.
Essentially, the content script allows for manipulation of the DOM and the background script, like the name implies sits in the background, handle state related things, or communicate to other aspects of your chrome extension, commonly the popup.js that is associated with the popup html when you click your chrome extension icon in the browser.
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.
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Travis,
I enjoyed reading your article. In looking at your manifest, see that you also have content_scripts and background but you don't provide any example as how they fit into everything. Would you mind providing a sample repo where we could look at all the moving parts?
Hi Matt, thanks for your comment!
I'll try editing the article when I have time, but
content_scriptandbackgroundscript are the building blocks for chrome extensions. I would recommend watching this video a better overview/primer.Essentially, the content script allows for manipulation of the DOM and the background script, like the name implies sits in the background, handle state related things, or communicate to other aspects of your chrome extension, commonly the
popup.jsthat is associated with the popup html when you click your chrome extension icon in the browser.Hope that helps.
Hi Travis,
Thanks for your response. I understand about both the
content_scriptsandbackgroundscripts 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.jswhen 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 thatpopup.jssession.Thanks again for your response and I look forward to your working repo.
Best regards,
Matt
From memory, passing data between
content,backgroundandpopupscopes 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
connectapi as opposed tolaunchwhich 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 thepopup.htmlviewport, right click -> inspect and added a breakpoint to mypopup.jsfile. 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.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.