Introduction

You can integrate Sleek into your browser extension as a JavaScript or TypeScript package. You will find a quick guide to setup Sleek in your browser extension below.

​

Setup

​

Permissions

The correct extension permissions must be requested for Sleek to function. Sleek requires the following permissions be requested by your browser extension:

• alarms
• storage
• tabs
• webNavigation
• scripting
• <all_urls> - This is only necessary if you are developing a manifest v2 extension.

Add the permissions to your manifest file like the below snippet:

More information on browser extension permissions can be found here or on your respective browser extension’s developer portal.

​

Host permissions (manifest v3 only)

In addition to permissions for extensions using manifest v3, Sleek requires your extension to operate on the correct URLs in the browser. In manifest v2, you specify host permissions along with other API permissions in the permissions array. Sleek runs CAA on every e-commerce page that the user interacts with. To do so, Sleek requires the following host permissions:

"host_permissions": [
  ... other hosts your extension operates on,
  "<all_urls>"
]

​

Installation

Sleek’s Web Extension SDK is bundled and served in a private package repo. To integrate the package into your dependencies, you will need to tell your package manager to get the @sleek/web-ext-coupon-sdk package from Sleek’s private repo.

​

Recommended private package setup

We recommend taking a dependency on Sleek’s private package repo for the @sleek/web-ext-coupon-sdk package. In addition, we recommend a setup where the package repo URL is maintained by a .npmrc file in the root of your project’s directory.

npm and pnpm

Add the following line to your .npmrc file in the root of your directory:

@sleek:registry=https://npm.cloudsmith.io/sleek/web-ext-coupon-sdk/
//npm.cloudsmith.io/sleek/web-ext-coupon-sdk/:_authToken={YOUR_TOKEN_HERE}

The above file will ensure that packages in the @sleek scope (like our @sleek/web-ext-coupon-sdk) will be fetched from our private repo, when installed and updated.

You should commit the resulting .npmrc file, if you aren’t already, so that your collaborators can use Sleek’s SDK as well.

​

Add the SDK to your dependencies

Install Sleek’s Web Extension SDK using the below command and your package manager will resolve and download the package from the private repository.

​

Add static SDK files

Sleek requires the following scripts, included with the SDK, to be available in the extension package: fc.js, f.js, and t.js.

The static scripts can be found in the downloaded web-extension-sdk package: node_modules/@sleek/web-ext-coupon-sdk/dist/*.

Copy the scripts into the root of your outputted and packaged web extension. We recommend adding this step to your build pipeline. i.e. f.js, fc.js, and t.js should be in the root of your extension, at the same level as your manifest.json.

​

Usage

Register Sleek in the background context of your extension in the construction lifecycle. Pass, at minimum, your client-side public Sleek API key to the setup.

import { initializeSleekSdk } from "@sleek/web-ext-coupon-sdk";

// In your background script constructor or setup.
initializeSleekSdk(process.env.YOUR_SLEEK_CLIENT_API_KEY_HERE, {
  // Your options here.
});

In the second parameter of the initialize call, you can provide Sleek with a variety of options to customize your integration. The web extension SDK is typed with bundled TypeScript types, so if you’re interested in any other capabilities or options in the initialization, check out the types or the reference here.

​

Event handling

Sleek can notify your extension when actions occur. For example, your extension might want to listen to when a coupon is entered. To register an event listener for any of the supported events, use the SDK instance method registerEventListener:

import { getSdkInstance } from "@sleek/web-ext-coupon-sdk";

// In the background context.
getSdkInstance().registerEventListener((event, tabId) => {
  // React to event here.
});

registerEventListener is typed, so if you are calling with TypeScript, the event types are present in the package’s types and the callback method will have data correctly typed as well. You can check event (seen above) against EventType to see what event was emitted.

What’s next:

Now that the Sleek SDK is embedded into your browser extension, Sleek is automatically turned on and ready for you to extend into user experiences in your extension. Check out the below documentation for more information on how to enable specific feature sets in the SDK.