Shuffle was a Chrome extension for e-commerce discovery similar to StumbleUpon. The extension offered a seamless way to browse products from emerging brands across the web.

Through this project, I developed a great sense of chrome extension best practices. Some things I learned along the way:

Style Encapsulation & Shadow DOM

The extension used a content script to inject a UI widget into the underlying DOM of any given product page. Since each brand's website had their own unique CSS rules, the widget styles and inheritance were disrupted by higher specificity selectors on the host page. This led me to explore Shadow DOM - a way to scope CSS styles to a specific DOM subtree. It turned out to be a great solution in the context of the injected extension. I had some extra fun getting TailwindCSS to play nicely inside the shadow root, but when it all came together it worked very well.

Configuring bundlers from scratch

Due to extension specific requirements, I was unable to leverage web traditional tooling like Next.js or create-react-app for bundling and decided to roll my own Webpack setup from scratch. This approach added complexity but was highly educational. By taking full control of the setup, I could integrate things like custom CSS loaders for Shadow DOM injection, dynamic manifest.json generation, content script hot reloading, and more.