frienddl.io
Website
Browser extension for finding friends on skribbl.io
Tech Stack: Javascript, jQuery, Chrome/Browser API, HTML, Bootstrap, Jekyll
June 2020 – August 2020
Published: 22 August 2020
During COVID-19 my friends and I started looking for more games to play online. We discovered skribbl.io, a drawing & guessing game. It’s a pretty bare bones game similar to Pictionary which makes it very accessible and easy to pick up.
The Problem
My friends realized if only 2-3 people wanted to play a private room wasn’t too fun. The only alternative is public rooms where you can’t invite friends.
After some research I found out the developer ticedev seems to have abandoned development on it and not have an online presence anymore. So the core gameplay and features won’t likely change anytime soon.
Prior Solution Attempts
When only a few of us wanted to play we decided the easiest thing to do would be to try to find each other in a public room. Our strategy was to join a game then in another tab try to join and leave games repeatedly hoping to eventually join a room someone else was in. We did this many hours with limited success.
During this process I started thinking about how easy it would be to automate this. It was also a bit frustrating since time spent searching is time spent not having fun playing the game.
After trying out some quick and dirty scripting copy-pasted into the browser’s developer console I realized this method had a number of downfalls:
- limitations on accessing the DOM of other tabs
- hard to scale (my friends aren’t developers)
- possibility of not working on other browsers
The Solution
During my scripting research many of the questions I was trying to answer were on threads related to browser extension development. I’ve used a bunch of different extensions over the years, but up until that point I had never stopped to think of them as a vehicle to deliver and run JavaScript. I quickly learned that there’s lots of official documentation as well as videos and blog posts for creating browser extensions from scratch.
Once I got some code running, it was off to the races. The UI came together easily so most of my effort was spent learning the browser API and figuring out how to structure it. Initially I used gibberish player names to test with that were unlikely to be found. That helped me fix a lot of bugs around asynchronous functions.
When it came time to actually test if I could find a friend, I let the search run 10 minutes and recorded all the players I saw. Then I used that list as input (I had many, many friends) and it found someone after less than 1 minute! And later when I showed my friends how to use it we were able to find each other in less than 10 minutes. It was a great feeling.
Future Development
I’ve been able to incorporate a lot of quality of life features into frienddl.io, but one major enhancement still in the backlog is multi-threaded searching. It’s something that may not even be feasible depending on the underlying code of the game and its security features. If it is feasible, I’ll need to be very deliberate about how many threads are allowed and potentially set caps on search time so it doesn’t create DDoS attacks.
Another idea I’ve been tossing around is pivoting to create a new web application that would make private rooms more appealing. It would sit on top of the game and provide missing socialization features:
- create an account
- add friends
- private game lobby with filters
Despite how many features are missing, there’s still a lot of community around this game that clones haven’t been able to replicate.
TL;DR
I learned how to make a browser extension so my friends and I could find each other on skribbl.io