Skip to main content
This guide walks you through the minimal setup to start capturing analytics in your Chrome Extension.

​
1. Install the SDK

npm install @composite-inc/composite-js

​
2. Add Manifest Permissions

Add the required permissions to your manifest.json: 
{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0.0",
  "permissions": ["storage", "tabs"],
  "host_permissions": ["https://prod.alb.us.api.composite.com/*"],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

​
3. Create Background Script

// background.js
import { HttpTransport, createBackgroundHandler } from '@composite-inc/composite-js';

const transport = new HttpTransport({
  apiKey: 'pk_your_api_key',
  apiHost: 'https://prod.alb.us.api.composite.com',
});

createBackgroundHandler(transport);

chrome.runtime.onInstalled.addListener(() => {
  console.log('[Composite] Extension installed');
});

​
4. Create Content Script

// content.js
import composite from '@composite-inc/composite-js/content-script';

(async () => {
  await composite.init({
    apiKey: 'pk_your_api_key',
    transport: 'chrome-extension',
    sessionRecording: true
  });
})();
Using a bundler with code splitting? Import from @composite-inc/composite-js/content-script instead of @composite-inc/composite-js. See Troubleshooting for details.

​
5. Build and Load

Build your extension and load it in Chrome:
  1. Run your build command (e.g., npm run build)
  2. Open chrome://extensions
  3. Enable “Developer mode”
  4. Click “Load unpacked” and select your dist folder
  5. Visit any webpage to start capturing recordings

​
Complete Example

Here’s a full working example with all files: 
import { HttpTransport, createBackgroundHandler } from '@composite-inc/composite-js';

const transport = new HttpTransport({
  apiKey: 'pk_your_api_key',
  apiHost: 'https://prod.alb.us.api.composite.com',
});

createBackgroundHandler(transport);

chrome.runtime.onInstalled.addListener(() => {
  console.log('[Composite] Extension installed');
});

​
What’s Next?

Installation

Detailed installation and manifest options

Background Script

Configure the background service worker

Content Script

Set up content script recording

Build Tools

Configure your bundler