Desktop Solutions

Chrome Extension Launchpad

12min
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 dependencies yarn 1 22 19 node 16 6 0 how to build 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 development 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) yarn install yarn start testing 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 yarn install yarn build\ dev production 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 yarn install yarn build\ prod content files 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 pages this is where the designs live for the alerts eligible merchant alert (ema) 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 couponator description this is the alert that will pop up during checkout when coupons can be applied page /src/content/pages/coupons tsx error description this is an alert that will pop up anytime the extension encounters an error page /src/content/pages/error tsx loading description this is an alert the default loading view whenever the extension alerts are inbetween states page /src/content/pages/loading tsx non merchant view (nmv) 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 offer details 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