Overview

I play in a weekly head-to-head categories hockey league on Yahoo Sports. This means that every week, you’re matched with an opponent and compete in a variety of categories (ex. goals, assists, etc). It doesn’t matter how much you win by in each category, but the goal will be to win the most categories every week.

When preparing for matchups I used to manually calculate expected production from my players to optimize matchups in Excel. This was really cumbersome as I would have to copy-paste player stats every week. This was a repeated process that started from scratch every week so I thought “This could be automated!”

I created a Chrome Extension that automates predicted performance based on a player’s per-game stats and the number of games they have during the week within the Yahoo website. This helps managers optimize their lineup throughout the season and win more matchups.

You can check out the Chrome Extension here

Why I Made It

A very simplified method of projecting how a team will perform is taking each hockey player’s per-game stats and multiplying them by the number of games he has during the week.

Overall, this strategy worked well for me, as I got 1st place in the second year of playing in my 14-team league 🏆.

When calculating the projected stats, I had to manually go into Excel and paste the data from numerous sources. This was an extremely tedious task.

So I automated it with this extension!

Now each player’s expected stats for a given timeframe can be easily viewable straight from the Yahoo Fantasy Sports website.

Personally, I wanted to try something new. I saw a few reddit posts of others creating an extension and was curious.

How It Works

The main meat of the project is a content-script.js file which modifies the Yahoo Fantasy Hockey website whenever it sees a player name in a table. It fetches data from the unofficial NHL API.

A popup window can be accessed via the browser’s toolbar. This page has settings users can change to fit their league settings, which are then stored in Chrome’s local cache.

Lastly, a service worker runs in the background to detect any events and triggers updates to the page content.

• content-script.js - this script runs in the context of the web page and is the file that modifies what the user sees
• service-worker.js - background script that catches events in the Chrome browser, such as when a new tab is created. Ajax requests don’t refresh pages, so I use this script to send an update message to content-script
• popup.html - a page to change extension options using the browser cache
• NHL API - content-script.js requests the NHL API to fetch players’ in-season stats

What I Learnt

Even for a pretty simple extension, there are a few moving parts that I learned:

• Chrome’s capabilities like handling browser events and caching
• async requests using await fetch
• refresher on CSS and importance of colours
• a new word: diacritic (thankfully I can normalize players’ names like Tim Stützle easily)

I was also happy to be able to make something from scratch, and release it into the public on the Chrome Web Store.

It turns out publishing a chrome extension is quite painless. It only costs a $5 registration fee and my extension was published after a few days.

I’ve also discovered it is a deep ecosystem, including monetized extensions that show off whimsical cats and inspiring landscapes. Even large companies like Jungle Scout and Honey started off as purely extensions.

Possible Next Steps

Overall I’m happy with the results. The extension shows a player’s expected stats and shares convenient links for further research.

Some things that could be improved:

• a more sophisticated model of predicted stats
  • the NHL API is not granular and I can only get a players’ stats per season
  • an option to get average stats in the last 30 days could show hot & cold streaks
  • I can take strength-of-schedule into account (more points are expectted if the opponents have an above-average GAA)
• currently the app shows each players’ stats, but can display the team’s total points for a matchup
  • just not sure where I’d display it on the page with nice UI