Chrome Extension Launchpad
The Extension Launchpad is an unbranded chrome extension for partners to do their own design as well as optionally extending our template. It will include all of our standard features with an unbranded design.
Yarn 1.22.19
Node 16.6.0
The extension is made with React and written in TypeScript. There are three ways to build it depending on your stage of development. In every case you’ll start by opening Terminal and changing directory to the root of the project’s directory.
When in development mode, yarn will be watching the project for code changes and auto-building the extension any time a change is made. There will be a directory named dist in the root directory. This can be used to install the extension in Chrome and on every code change Chrome will reload with the latest changes (sometimes referred to as hot reload).
In testing mode, the dist directory will be replaced by the code built using the dev environments. There are two main differences between Testing and Production builds:
- Testing builds include console logs
- Testing builds produce non-minified code
Use the Production build mode when creating the final version that you will upload to the Chrome Web Store. This final build will use minified code and also suppress console logs for security purposes.
All design work is done within ./src/content
There are two directories:
- ./src/content/components
- ./src/content/pages
The pages directory is where you will find all the designs for the alerts. The components directory is where the shared elements for the pages reside.
This is where the designs live for the alerts.
Description
This is an alert that will pop up on merchant’s where the user is eligible to earn cashback.
Page
./src/content/pages/Eligible.tsx
Description
This is the alert that will pop-up during checkout when coupons can be applied.
Page
./src/content/pages/Coupons.tsx
Description
This is an alert that will pop up anytime the extension encounters an error.
Page
./src/content/pages/Error.tsx
Description
This is an alert the default Loading view whenever the extension alerts are inbetween states.
Page
./src/content/pages/Loading.tsx
Description
This is an alert that will pop up when the user clicks on the extension icon when they are not on a eligible merchant page.
Page
./src/content/pages/NotEligible.tsx
Description
This is an alert that will pop up on merchant’s where the user is eligible to earn cashback.
Page
./src/content/pages/Eligible.tsx
