Skip to main content

License a browser extension

Written for developers

This is a step-by-step technical guide to adding a license screen to your product: it has code to copy and API calls to make. If you sell the product but don't write its code, read Not a developer? Start here and send this page to your developer.

This guide covers Manifest V3 extensions for Chrome, Edge, and Firefox. The customer pastes their key in your popup or options page. A background script calls Licensr, and a daily alarm re-checks the key.

Licensr does not host your extension. You publish it in the Chrome Web Store, Firefox Add-ons, or Edge Add-ons (or on your own site), and link your buy page from the listing.

Product settings​

SettingValue
Activation modeSeat: one activation per browser install.
Client typeBrowser.
Allowed websitesLeave empty (under Advanced options). Firefox gives every install a random moz-extension:// address, so it cannot be listed.
IdentifierA random ID your extension creates once and stores. The code below does this.
Call Licensr from the background, not from a content script

A content script runs inside the web page, so its requests carry that page's address as the origin. Do the Licensr calls in your background service worker and let the popup and content scripts ask it through chrome.runtime.sendMessage.

Create a plan​

In the admin panel, open your product and add a plan: one price with a limit on how many devices or websites one key can be used on. Keep the defaults if you are unsure. You can add more plans later. See the Quick start.

Also create a Client API key on the product (shown once, starts with pk_test_ or pk_live_). This is the key you put in your product.

Get a test license​

You do not have to pay to try your integration. In the admin panel go to Customers → Issue license, enter your own email, pick the product and plan, and issue it. The key (starts with lic_) arrives by email and is shown once on screen. The dashboard checklist has a shortcut for this.

Use your pk_test_ key against https://api.staging.licensr.app while you build, then switch to pk_live_ and https://api.licensr.app when you release.

What your license screen must do​

Your product needs one small screen: a text box for the key, an Activate button, and a Deactivate button. It follows these rules, whatever the platform:

  1. Activate, then validate. When the customer clicks Activate, call activate (this registers the device or website against the plan's limit), then validate. Unlock only if the validate response has valid: true. Save the key and the activation_id from the activate response.
  2. Check again in the background. Call validate at every launch and about once a day while the product runs. A refund, a cancelled subscription, or an expired license happens after the sale, and this daily check is how your product finds out. Without it, a refunded key keeps working forever.
  3. Lock immediately on valid: false. If Licensr cannot be reached, stay unlocked (optionally lock after a few days with no answer). Try again later.
  4. Offer a Deactivate button. It calls deactivate with the saved activation_id, forgets the key, and locks the product. This lets a customer move to a new computer without asking you for help.

Messages to show when activate fails (read detail.error in the response):

CodeSay
license_not_found"We could not find that key. Check for typos."
activation_cap_exceeded"This key is already in use on the maximum number of devices. Deactivate it on another device first."
license_inactive"This license is no longer active. Contact the seller."
no response at all"Could not reach the license server. Try again."
any other code"Something went wrong (code)." Show the code so the customer can send it to you.

The full list is in Errors.

The code​

manifest.json needs permission for storage, alarms, and the Licensr API:

{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"permissions": ["storage", "alarms"],
"host_permissions": ["https://api.licensr.app/*", "https://api.staging.licensr.app/*"],
"background": {"service_worker": "background.js"},
"action": {"default_popup": "popup.html"}
}

For Firefox, use "background": { "scripts": ["background.js"] } and add "browser_specific_settings": { "gecko": { "id": "you@example.com" } }.

background.js:

const API = 'https://api.staging.licensr.app'; // production: https://api.licensr.app
const KEY = 'pk_test_...'; // Client key, safe to ship in the extension
const SLUG = 'my-extension';

async function call(path, body) {
try {
const res = await fetch(API + path, {
method: 'POST',
headers: {Authorization: `Bearer ${KEY}`, 'Content-Type': 'application/json'},
body: JSON.stringify(body),
});
return await res.json();
} catch {
return null; // network problem: do not lock
}
}

async function deviceId() {
const {deviceId} = await chrome.storage.local.get('deviceId');
if (deviceId) return deviceId;
const id = crypto.randomUUID();
await chrome.storage.local.set({deviceId: id});
return id;
}

// Popup clicked "Activate".
async function activate(licenseKey) {
const activation = await call('/v1/license/activate', {
license_key: licenseKey,
plugin_slug: SLUG,
activation_type: 'seat',
identifier: await deviceId(),
label: navigator.userAgent.includes('Firefox') ? 'Firefox' : 'Chrome or Edge',
});
if (!activation?.activation_id) {
return {ok: false, error: activation?.detail?.error ?? 'network'};
}
const check = await call('/v1/license/validate', {license_key: licenseKey, plugin_slug: SLUG});
if (!check) return {ok: false, error: 'network'};
if (!check.valid) return {ok: false, error: check.detail?.error ?? 'license_inactive'};
await chrome.storage.local.set({
license: {key: licenseKey, activationId: activation.activation_id, valid: true},
});
return {ok: true};
}

// Popup clicked "Deactivate".
async function deactivate() {
const {license} = await chrome.storage.local.get('license');
if (license) {
await call('/v1/license/deactivate', {license_key: license.key, activation_id: license.activationId});
}
await chrome.storage.local.remove('license');
}

// Runs at browser start and once a day.
async function check() {
const {license} = await chrome.storage.local.get('license');
if (!license) return;
const result = await call('/v1/license/validate', {license_key: license.key, plugin_slug: SLUG});
// No true/false answer (offline, rate limited, server error): keep the previous state.
if (typeof result?.valid !== 'boolean') return;
await chrome.storage.local.set({license: {...license, valid: result.valid}});
}

chrome.runtime.onInstalled.addListener(() => chrome.alarms.create('licensr-check', {periodInMinutes: 24 * 60}));
chrome.runtime.onStartup.addListener(check);
chrome.alarms.onAlarm.addListener((alarm) => alarm.name === 'licensr-check' && check());

// The popup talks to this script instead of calling Licensr itself.
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
if (message.type === 'activate') activate(message.licenseKey).then(sendResponse);
if (message.type === 'deactivate') deactivate().then(() => sendResponse({ok: true}));
return true; // keep the channel open for the async reply
});

In your popup, send {type: 'activate', licenseKey} when the customer clicks Activate, and {type: 'deactivate'} for Deactivate. Everywhere your extension unlocks a feature, read license.valid from chrome.storage.local.

Licensr does not host your download. Host the file on your own website or store, then add a Buy button that links to your Licensr buy page (the dashboard shows the full link, which looks like /buy/your-slug). Customers pay there and get their key by email, then paste it into your license screen.

Go live​

  1. Swap your pk_test_ key for the pk_live_ key and use https://api.licensr.app in the release build.
  2. Buy your own product once, using the buy page, to see the whole flow.
  3. Check the dashboard: the Get started checklist shows You're live! when payments, a product, a plan, a test license, and a first check from your product are all done.

Stuck? The license calls guide lists every field and error.