Best Buyer
Personal Best Buy add to cart extension | My first browser extension
Overview
To compete with bots during a global chip supply shortage, I created a personal 'Add to Cart' browser extension for a popular retailer's web-store. The extension does three things: It continuously refreshes a product page at a set interval, it clicks the 'Add to Cart' button once it becomes available, and finally it blasts an alarm once that happens. This allowed me to stay on top of several hour long drops, letting me sit back and be passively present while it goes at it as it does the constant checking for me.
Context
September 2020 was the release of Nvidia's RTX 3080 and RTX 3090. However the demand for new hardware during the Covid Pandemic and the mediocre launch of the 20 series cards made the Nvidia cards seem like a paper launch with scalpers left and right with no end in sight. What followed: Nvidia closed shop on their own site, some AIB (Add-In Board) partners significantly increased pricing on their cards, entire communities with hundreds of thousands of members formed around card drops. So, if you wanted a card you either pay for a bot or you try and snag it yourself by joining some of these drop communities, by being there for every drop day, wait for hours refreshing a site and sometimes for multiple days back to back as the expected drop day is pushed back, and then you must repeat this for months on end while competing with bots and others until you finally cop yourself a GPU. I took an in between approach to get my GPU.
The only retailer who had: semi reliable drop patterns, has a website that is developed well enough to handle extreme surge loads (some retailers' sites would just go down during drops which is very frustrating), and had MSRP cards including Nvidia's Founders Edition (FE) cards — was Best Buy.
The Goal
My goal was to beat most people to the front of the queue for a product drop by getting in queue as soon as the drop occurs which means 5 to 15 seconds before the Discord Community pings go out to everyone. Most people, understandably, do not have the stamina to stare and refresh a page for sometimes multiple hours. To achieve this I need to remove 80% of the labor required for the drops so that I am one of the few that are refreshing and clicking the 'Add to Cart' button as soon as it appears.
How it Works
Extensions are built with the typical webdev languages (html, js, css, etc.) and libraries. Chrome and (I would assume) Chromium based browsers use a manifest json file which dictates which extension-interpreter to use and declares all the extension options such as permissions and files the developer is trying to use in their extension.
I created my extension with Manifest V2 but its being phased out for Manifest V3 with end of life sometime in early 2022. However, since this is just for me and my brother, and I am expecting to use it just long enough to get two cards, I was not too concerned with it being at its end-of-life.
An extension has 3 main sections: [1] The background script which is persistent and can communicate with all the individual tabs. [2] The foreground script which is the script which gets injected into the webpage directly and can have multiple instances across browser tabs. [3] Finally, the popup html and script which you can use for options and user input.
The following 3 items were my main resources for learning and getting started with creating a Chrome Extension.
Resource 1: Amazing video tutorial by the channel An Object Is A concisely explaining and showing how to implement all the core parts that most extensions would require.
Resource 2: Supplemental tutorial by EvilTester - Software Testing.
Resource 3: The Chrome Developers documentation on all things regarding the creation of Chrome Extensions.
My Takeaways
Creating a chrome extension was a lot easier than I expected (at least Manifest V2 was) and any future browser extension projects should be less intimidating. From now on custom browser extensions are going to be apart of my mental toolset as possible solutions for future issues/problems I might encounter on the web.