Using PostHog for browser extensions

Do you have a Firefox or Chrome browser extension with a user interface and want to understand how it's being used? PostHog is the perfect way to do just that.

Setup for Firefox & Chrome extension

Start by installing the PostHog JavaScript web SDK.

npm install --save posthog-js

Browser extensions prohibit remote code loading. Import directly from the posthog-js/dist/array.no-external.js bundle and set disable_external_dependency_loading: true to avoid remote code loading.

import 'posthog-js/dist/array.no-external.js'

posthog.init('<ph_project_api_key>', {
    api_host: 'https://us.i.posthog.com',
    persistence: 'localStorage',
    disable_external_dependency_loading: true
});

Using product analytics

If you have autocapture enabled, PostHog will automatically track when the extension interface is opened, closed, or clicked.

If you'd like to instrument your own custom events, use the posthog.capture() function:

posthog.capture('custom_event_name', {})

See our JavaScript web SDK docs for more details.

Using other PostHog products

Due to the new content security policies in Manifest v3 about unsafe-eval and remote code execution, you need to import bundles directly to use other PostHog products.

To use session replay, surveys, error tracking, and web analytics, import their bundles directly:

import "posthog-js/dist/posthog-recorder" // For session replay
import "posthog-js/dist/surveys" // For surveys
import "posthog-js/dist/exception-autocapture" // For error tracking
import "posthog-js/dist/tracing-headers" // Tracking across client and server
import "posthog-js/dist/web-vitals" // Tracking web vitals