website logo
WildlinkWildfire-corpFeaturesNetworkCompanyPricingResourcesContact us
⌘K
Partner Admin
Commission History
Performance Summary
Desktop Solutions
Browser Extension Authentication
Implementing Wildfire Coupons into an existing Chrome Extension
How to Implement OAuth in a Chrome Extension
Direct tracking code injection to extension
Chrome Extension Launchpad
Mobile Solutions
How to implement the Mobile Safari Extension
Wildfire APIs
Country filtering and multiple applications
Public Commission Sample Data
Getting to know the Wildfire JSON Data Feeds
Creating links
Gift Card
Merchants and Domains
Tracking Code (TC) Parameter
Syncing Commission Data via API and Callbacks
Working with Wildfire Coupon Data
Getting started with the Wildfire API Postman collection
Coupon Data JSON Structure
Merchant Images
FAQ and General Resources
Orders vs. Commissions
Understanding Our Data Collection and Use
Jump Track
Best Practices
6 Reasons Why a User Might Not Get Credit for Earning
FTC Compliance Overview
Stand-Down Policy Compliance
Docs powered by
Archbee
Desktop Solutions

Chrome Extension Launchpad

17min

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).

Text
|
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:

  1. Testing builds include console logs
  2. Testing builds produce non-minified code
Text
|
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.

Text
|
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)

Document image


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



Alternate Merchant Alert (AMA)

Document image


Description

This is an alert that will pop up on targeted domains where we don’t currently have an offer in order to attempt to forward the user to a similar merchant where they can earn cashback.

Page

./src/content/pages/Alternate.tsx

Couponator

Document image


Description

This is the alert that will pop-up during checkout when coupons can be applied.

Page

./src/content/pages/Coupons.tsx

Error

Document image


Description

This is an alert that will pop up anytime the extension encounters an error.

Page

./src/content/pages/Error.tsx

Loading

Document image


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)

Document image


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

Document image


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

Updated 24 Aug 2023
Did this page help you?
PREVIOUS
Direct tracking code injection to extension
NEXT
How to implement the Mobile Safari Extension
Docs powered by
Archbee
TABLE OF CONTENTS
Dependencies
How to build
Development
Testing
Production
Content Files
Pages
Eligible Merchant Alert (EMA)
Alternate Merchant Alert (AMA)
Couponator
Error
Loading
Non Merchant View (NMV)
Offer Details
Docs powered by
Archbee