View on Chrome Web Store

Technologies Used:

React, Chrome API

Role:

Development

Category:

Chrome Extension

Motivation

As a long time tshirts seller on the Amazon Merch platform, I was fed up with their outdated 2015-era React sellers dashboard interface.

The UI displayed the bare minimum information about your currently online products. Key fields for a selling item were missing, such as:

1. Number of comments
2. Average rating
3. Total units sold since uploading it
4. Amazon internal rank score
5. Item description
6. Item key features

Due to my frustration, I decided to develop this small Chrome extension that activates once you are logged into your Merch account and adds an additional reporting tab to the dashboard existing interface. This new tab contains all of your products with enriched information and all of the original missing important fields filled in. I built the new tab UI using React and Redux.

Scraping Amazon product info

To get this extra reporting data and present it to the user, I had to scrape all of the user online inventory and extract each product's missing fields. The scraping was done client-side on the user machine, since I did not want to authenticate him or keep any data of him.

I iterated over the inventory DOM presented in the original Amazon Merch Dashboard, fetched each of the products main Amazon page markup and constructed an offscreen DOM tree out of it using Document.createDocumentFragment(). Artificial varying delays between each fetch was implemented to not raise Amazon's suspicion.

Once I had the real Amazon product page as a DOM node in memory, I simply queried the specific fields (number of comments, ratings, Amazon ranking) using myPageFragment.querySelector(). I calculated the average rating and average number of comments weekly out of this raw values.

Persisting collected data

Once all of the missing key fields for each product in the user inventory were queried and calculated, I used chrome.storage to save them on the user machine and let the database synchronise across all of his Google Chrome instances. This part was key, because I did not want the data to leave the user computer and be stored anywhere remotely, due to GDPR concerns and copyright issues (I did not want the user to get an impression I was scraping his design ideas and saving them for myself).

This extension was well received by the Amazon Merch community, having been downloaded hundreds of time within the first 24 hours and some of the most vocal influencers making videos about it and recommending it.

Important Note: I sold this extension and exited by the end of last year and no longer have any intellectual and copyright claims on it. After consulting the new owner, I was allowed to include it in my portfolio and briefly explain the reasoning behind it.