Channel Debt

This is the last devlog in Flavortown. What a journey!

I’ve been stuck on a bug in the navigation, trying to fix why the main function did not run when I went to another channel page. After a lot of trial and error, turns out I was listening to the wrong event. I fixed it by listening to yt-navigate-finish and calling the main function and resetting the state on this event, and now it works as expected.

With some final touches, building the .crx file and creating a release, I am finishing this project. I wanted to add more features because I really liked the idea but there is no time left. Maybe I will work on it after Flavortown ends.

Worked on improving the accessibility of the badge the extension creates. Did that by adding role of status to it, and adding aria labels for both the refresh button and the stats span, this helps screen readers deal with it better. Also made sure the colors have good contrast and the button has focus state indicators.

Added a refresh button to update the badge stats without reloading the page.

To understand why this is needed, I need to explain how the extension counts videos. It uses a MutationObserver combined with a short timer that waits until no new video cards have been added to the DOM for a second. This gets the best of both worlds, it doesn’t run too early on slow connections, and it doesn’t need to know upfront how many videos to expect (which varies by screen size and channel size).

The downside is that the count can be inconsistent, not all loaded videos are always counted. The refresh button fixes this by counting whatever is already in the DOM at that moment.

My first implementation just called main() on refresh, which was a huge mistake, it reruns the whole loading flow including the observer wait, which made no sense. So I extracted countVideos() as a separate function, used it in both main() and refresh(), So the refresh is instant and much more performant.

Rewrote the whole extension with focus on performance. After getting everything to work in the last devlog, I focused on improving the code and performance, splitting it into smaller simpler functions, and optimizing it. Making the project ready for the features I will be adding.

I hesitated on using Vite as a build tool for the extension, but decided not to. Since the code is small, I split it into two main files, one for the main code and one for the messages I show on the badge about the channel depending on the watched video percentage, then loaded the messages file before the main file so I can access it at runtime. This was more than enough for a project this size. Maybe in the future I will use it to split my code into modules and then build it into a single file.

This is my first extension that I have ever built. I took a look at the chrome extensions docs then got started. I wanted to build an extension for youtube but I did not want to rebuilt an extension that have been created a 1000 times. So I made Channel Debt, it shows how many videos you’re behind on for any YouTube channel.

It knows how many videos you did not watch by looping over all of the videos that have been loaded in the videos page then see which ones you have watched, because these videos usually have a progress bar in them. It is not the best way but it gets the job done. It also shows a small message under these stats, trying to be funny and stuff.

Since youtube is an SPA it has to rerun every time it navigates to another page, because this does not happen automatically, so I fixed this and now it works as expected.

It is my first extension and the idea is weird so it might have problems but I am still working on it.