Efficient dev and debug setup for building Chrome Extensions?

[Semih Sezer]

What is the proper way to setup a productive dev setup for building and debugging Chrome extensions? I use Chrome Dev Tools but the issues below still make it extremely inefficient for me to build and debug my extension.

1 - There is no way to hot reload the popup without manually launching the extension. This means that every time I make a code change, I have to manually close and reopen the popup to get to the same place.

2 - If there is an error on one of my clicks on the popup, the popup closes and so does the Chrome Dev Tools window and the console where I would see the error. I can find the error on the Extension page, but I lose all the context. How can I see the full stack trace and debug this better?

3 - What is the proper way to trigger service workers for debugging? Again, having to do this manually from my popup makes it very time consuming.

Feel free to point me to other answers, but I couldn't find a good guide that covers the dev productivity aspect. Thanks in advance!

[woxxom]

1. press Ctrl-R or F5 key in devtools for this popup
2. normally devtools shouldn't close, so there must be something in your code that closes the popup e.g. `window.close` or `chrome.tabs.create` without `active:false` parameter
3. "trigger" can mean many things, it's unclear what you mean by "trigger service workers for debugging". FWIW you can open a separate devtools for the service worker from chrome://extensions page, but it'll keep the worker running, so you won't be able to debug its startup properly (you can do it in devtools for the popup which handles both the popup context and the service worker context).

[Semih Sezer]

Thanks a lot for your response - this is very helpful and I didn't know about cmd+R!

For 3- I meant calling a function in my service-worker. In my extension, some user actions trigger an event, which gets picked up by a function in service worker. Or a service worker watches the user's recent tabs saves them to local storage. How would I efficiently test such things with minimal manual clicks?

[Cuyler Stuwe]

Extensions are a rare area in software dev where there have never really been any "industry standards".

I've worked on a lot of extensions for employers and freelance clients, both greenfield and legacy.

It's almost always been an entirely different setup every time. Even my own template starter has been something I've tweaked from time to time between greenfield contracts.

Plasmo is probably the most-adopted "framework" for extensions. That said, I'm not a big fan of it, and it's still not that widely used (it's just used more visibly than other starters).

"2 - If there is an error on one of my clicks on the popup, the popup closes and so does the Chrome Dev Tools window and the console where I would see the error. I can find the error on the Extension page, but I lose all the context. How can I see the full stack trace and debug this better?"

Assuming you're making an extension that's meant to work across both Chrome and Firefox, I've found Firefox to have a better debugging experience for the lifecycle of a popup.

Alternatively, by carefully crafting how your popup page initializes, you can set it up so that you can open it within a new tab. Depending on your extension's needs, this can be viable. It's especially simple to do this when your extension's popup doesn't care about any of the context of the active tab (e.g., when it's just a "settings" or "dashboard" page).

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/7d2fbd19-3534-452b-8d7c-d0a703e22086n%40chromium.org.

[Semih Sezer]

Thanks so much for your detailed response, covering the context and history as well! I will give a try to Firefox and see if I can carefully craft the popup lifecycle there. I do need to get information about the open tabs, but that might be fine.