Speedrun Buddy

I made a Chrome Extension called Speedrun Buddy! Check it out on the Chrome Web Store here!

Introduction/Inspiration

My inspiration for this was seeing the programmer Ottomated make an extension for one of my favorite livestreamers: Ludwig. I was curious as to what the process was like, and I wanted to give it a shot myself. I mostly wanted to do this as a proof-of-concept, so that I learned more about the infrastructure and the process of deploying something to a web store. That being said, I'm pretty happy with how my extension turned out!

What does it do?

• TL;DR
  • Speedrun Buddy enhances your Twitch viewing experience by getting up-to-date speedrunning information for your favorite games and speedrunners. Whenever you go to a Twitch streamer's page, Speedrun Buddy gathers speedrunning information on the streamer, as well as the game they are currently playing.
• Overview
  • I watch a ton of speedrunning content on Twitch.tv, and I always find myself going back and forth between Twitch and Speedrun.com to get information on runners and games. This extension does the information-hunting for you, and displays relevant Speedrunning information on the current game and Twitch streamer right below the video player. Feel free to check it out!
• Features
  • Automatically pulls up speedrun leaderboards associated with the game you're watching
  • Automatically pulls up speedrun statistics for the streamer you're watching
  • Provides convenient links to quickly get more info on the game, runner, or runs
  • Responsive UI and unobtrusive display
• How to Use
  • Go to a Twitch page with an active livestream
  • If game or player information are found, relevant speedrunning statistics will be pulled up under the stream
  • Cycle through the games and categories of information or click on the links for more information
  • Click the arrows in the Game Section's UI to cycle through data for the records for each speedrunning category for the current game.
  • Click the arrows in the Player Section's UI to cycle through personal-bests data for all the games they run.
• Notes
  • Gathering the data for a page takes a moment; sometimes it takes up to 10 seconds or so to update to the new page. This will not, however, affect the speed of loading the Twitch page.
  • If you're seeing the wrong information for a page, feel free to just refresh; that usually fixes it!
  • This is just a little tool I made for my own Twitch viewing experience; if you've got any suggestions on how to make it better, please leave me some feedback and I'll try to implement it!

Tech Notes

One really nice thing about Chrome Extensions (as opposed to other web development), is that you only have to worry about it being used in the Chrome browser. That being said, this project posed its own challenge, as I had to decrypt how Twitch.tv loads its pages, how it generally lays out its channel pages, and how it reloads sections of the page on different triggers. This was pretty tricky, but I got it working pretty well. The other frustrating thing about this is that if Twitch changes up how it lays out its content in the DOM, I will have to update my extension accordingly. This project required me to work very intimately with Twitch pages and their loading logic. It was hard to try and piece together the logic from an outsider's perspective, so the unpredictability of page loads and other weird logic made this start to become kind of a pain in the ass to work on. Since this was just meant to be fun, I decided to just release the extension with the small amount of bugs that I didn't want to take the large amount of time to try and nail down a comprehensive solution for. That being said, most bugs can be rectified with a simple page refresh, so I'm pretty happy with what I put out!

TODO/Things to Add in Later Versions (Loosely Ordered)

• Features
  • Allow user to toggle the extension off for certain Twitch pages
  • Display game/category tags if a category is named the same as another category
  • Add placeholder text while things are loading
  • Sort the PB list by place (so we show the lowest place runs first)
• Bugfixes (Note: a simple page refresh will fix most of these)
  • If you go to Twitch channel that is not live (and when you navigate away from one that is not live), there is some jank, including that for all following pages the added html will be above the streamer name (rather than below).
  • There is still some difficult-to-reproduce jank with pages like "twitch.tv/directory".
  • There seems to be some difficult-to-reproduce jank when you navigate too quickly between Twitch pages.
  • Change the flexbox layout so that rows are layed out together. Right now I add by column, and this makes it so that when one entry goes into a second row, the other rows/columns will not change accordingly.
• Other/QOL
  • Could change so that the URL-checking is not done in the background worker, but is done via the function running repeatedly in sb_page.js (along with the category name).
  • Wrap most of my code call in a try-catch so errors won't display in browser
  • Learn more about how to protect code I am deploying online (minify, remove comments, etc.)
  • Gauge possible performance improvements by changing the "run_at" in the manifest file to "document_end"

Privacy Policy