Open Roller, Project Diary 2

Only a small dip into things since the last post, but just for fun and habits, a quick update.

Diary 1 is here

Firefox CSS Woes, Discovered and Solved

I was so delighted with how easy it was to get Svelte working in Chrome and Firefox, thanks to the Sveltekit adapter for Chrome extensions that I confidently plowed ahead playing with a little layout and css in dev mode, the web app rendering as a normal web page in that context.

I added styles as part of discrete compents, in the Svelte way. Then I did the quick dance in the command line.

yarn build
cd build
web-ext run

And suddenly I started seeing a 500 error in Firefox, where my UI should be.

After a bit of messing around, and inspecting the console for the extension, it became apparent that Svelte was trying and failing to load the new css file created at build, derived from the components. It worked fine in Chrome, but not Firefox. Maybe something to do with trying to preload, or maybe different path handling in Firefox.

Anyway, the fix was easy, I just moved the CSS into it's own simple CSS file, and served it as one of the static assets. This got things working again.

Web Ext Quality of Life Improvements Learned

Out of the box, web-ext runs a kind of sandboxed version of Firefox in which to debug and assess your extension. It has a little live reloading too which is great. But you have to go in and out again between builds, you can't run the dev environment of the Svelte project and generate builds at the same time. Well, maybe if you know what you're doing you can, but that's not me just yet.

So going back to Roll20 and pasting in my password every time and loading a live game was fairly slow, especially when running a brand new, temporary profile every time. As the intelligent people behind web-ext have it, there's no need to suffer this way. The docs showed me that I could create a user profile, I calle dit WebExt, for keeps and run the dev extension on that profile.

web-ext run --keep-profile-changes --firefox-profile=WebExt

The --keep-profile-changes part means that history, bookmarks, even pinning the extension to the toolbar, are preserved between sessions. Just lovely.

Knowing if the Roll20 VTT is Open

Finally, I got a function working to get the active browser tab array from the Tabs API, and filter through it for one matching the VTT/game url for Roll20. That being found, I use the filtered array to make a reactive declaration in Svelte so that in my component I have a boolean telling me if there's such a tab open, and I have the window and tab id for that tab in memory, all the better for posting messages to it.

Next step - start posting stuff into chat on Roll20!