Here’s how an Instagram story feature request led to building an application. Sometime last year, a friend posted on her Instagram story about the difficulty she faced managing multiple carts on various websites. For context, she generally did her clothing shopping across numerous sites like Zara, Shein, and other fashion brands. Some of the issues she faced included:
- The Stress of Managing Multiple Carts: Juggling multiple carts across different websites was a hassle.
- The Stress of Syncing Carts: If she didn’t find the high-waist black ripped jeans she wanted on Zara but found them on ASOS, she had to remember this new cart to avoid purchasing something similar later. It might sound minor, but many people don’t check out immediately, often leaving items in their carts for hours, days, or even longer.
This Instagram story and a subsequent chat with her led my friend and me to dedicate a few hours weekly over the past five months to developing a cart manager extension for Chrome called FoxHunt.
The Goal of FoxHunt
The goal of the extension was simple: to provide users with a tool to add items from multiple websites, filter and sort those items, and share them with others. While building FoxHunt, I discovered another great extension called Share-A-Cart, which is similar but with a key difference in purpose. Share-A-Cart is designed to build and share shopping lists, whereas FoxHunt focuses on managing the shopping experience across various sites.
Technical Details and Development Journey
I was excited to work on FoxHunt for two reasons: it had been a while since I worked with vanilla JavaScript, and I had never built a Chrome extension. This curiosity led to several learning experiences and false starts, some of which I’ll discuss here.
False Start 1: Understanding Chrome Extension Architecture
The first challenge was understanding Chrome extension architecture, how it communicates with the browser, and the context it has access to. An excellent documentation exists on this topic: Chrome APIs Docs. One crucial aspect to know before developing an extension is that it runs in its context, separate from the page it interacts with, and has its local storage.
False Start 2: Building Features Without Understanding Architecture
Initially, we started building features without fully grasping the architectural limitations. For example, we wanted to launch the extension and display a message when users added an item to their FoxHunt cart. However, we soon discovered that launching an extension via a JavaScript command wasn’t possible: Stack Overflow discussion led to a lot of rethinking and alternate ways of delivering certain features.
Development Challenges
These false starts almost led to a frustrating experience. We had to continually rethink user features while I was dedicating only about 5 - 10 hours a week to the project. Despite these challenges, we developed several valuable features for our target users in version 1, which are now live on FoxHunt.
We have exciting plans for version 2, which will enhance existing features and expand the number of sites we integrate with. While some features were scraped due to technical limitations, the current version provides significant value.
We are super open to feature suggestions, ideas, and general user feedback. Feel free to leave me a message on Twitter.