> AI agents: this is one page from PostHog's docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt

# Chrome extension

Canonical URL: https://posthog.com/docs/toolbar/extension

> **Cloud region:** This page uses US Cloud hosts. For an EU Cloud project, use `https://eu.posthog.com` instead of `https://app.posthog.com` (app host for links).

## On this page

- [Install the extension](#install-the-extension)
- [Open the side panel](#open-the-side-panel)
- [Sign in and choose your PostHog host](#sign-in-and-choose-your-posthog-host)
- [Prepare your website](#prepare-your-website)
- [Access control](#access-control)
- [Tools](#tools)
- [Permissions](#permissions)
- [Data the extension sends](#data-the-extension-sends)
- [Limits](#limits)

The PostHog Chrome extension gives you the [toolbar](https://posthog.com/docs/toolbar.md) tools in a Chrome side panel next to your website. With it, you can inspect elements, view heatmaps, override feature flags, debug events, and more.

Compared with the floating toolbar:

-   You don't relaunch it from PostHog for each site or tab.
-   It doesn't use the page's own toolbar session.
-   It doesn't add anything to the page itself, apart from the overlays the tools draw, such as heatmaps or element highlights.

## Install the extension

The extension needs Chrome 116 or later. It works only in Chrome. There is no Firefox version.

1.  Go to the [PostHog extension in the Chrome Web Store](https://chromewebstore.google.com/detail/posthog/khajokjedaapggnioajbdaoaaedaaoeg).
2.  Click **Add to Chrome**.

## Open the side panel

Click the extension's button in Chrome's own toolbar to open the side panel next to the website.

The side panel follows the active tab of its window. When you switch tabs, it shows the state of that tab.

## Sign in and choose your PostHog host

The extension uses the PostHog login that you already have in that browser. If you're signed out, the side panel asks you to log in.

To choose your PostHog host, open the settings at the bottom of the side panel. Choose US Cloud, EU Cloud, or enter a self-hosted address. You also switch the project in these settings.

The first time you open the tools for a project, a tab opens and closes by itself to connect the toolbar. If that fails, the side panel shows a **Connect** button.

Chrome may ask for access to your PostHog host. If it does, click **Allow access** in the side panel.

## Prepare your website

### Add your website to the authorized URLs

The extension only runs on a page when the page's origin is in your project's [authorized URLs](https://app.posthog.com/toolbar).

If the origin isn't authorized, the side panel tells you. It links to the authorized URLs setting and lists the project's authorized URLs. Click one to open it in a new tab. The side panel stays open.

> **Note:** Only add websites that you own and control. Authorized URLs are a [security boundary](https://posthog.com/docs/health-checks/authorized-urls.md#why-it-matters).

If you open the side panel on the PostHog app itself, it asks you to open your own website and lists your authorized URLs.

### Check the page

-   The page must use https. Plain http works only on `localhost`.
-   The extension can't run on browser pages, such as the new tab page, or on the Chrome Web Store.
-   To override feature flags, the page must load [posthog-js](https://posthog.com/docs/libraries/js.md) as `window.posthog`.

## Access control

The project's [access control](https://posthog.com/docs/toolbar.md#access-control) for **Toolbar** applies to the extension. A user without toolbar access sees a message that tells them to ask an admin.

## Tools

The side panel has these tools:

-   **Inspect** – Hover an element to see its selector, its click and rage-click counts, and its actions. Then [create an action](https://posthog.com/docs/toolbar/create-toolbar-actions.md) from it.
-   **Heatmap** – View clickmaps, [heatmaps](https://posthog.com/docs/toolbar/heatmaps.md), and scroll depth. Set a date range, filter to an area of the page, and click **Save to PostHog**.
-   **Actions** – View and edit [actions](https://posthog.com/docs/data/actions.md), and pick elements.
-   **Feature flags** – [Override a flag](https://posthog.com/docs/toolbar/override-feature-flags.md) on or off, pick a variant, edit the payload, and clear overrides.
-   **Events** – A live [debugger](https://posthog.com/docs/toolbar.md#debugging-events) of the events that posthog-js sends from the page, with search, pause, and export.
-   **Web vitals** – The project's P90 [web vitals](https://posthog.com/docs/web-analytics/web-vitals.md) metrics, and the metrics for this page load.
-   **Experiments** – [No-code web experiments](https://posthog.com/docs/experiments/no-code-web-experiments.md). Edit a variant and preview it on the page.
-   **More** – Debug info, a link to the current [session recording](https://posthog.com/docs/session-replay.md), an option to hide PII on the page, and a [screenshot for an event](https://posthog.com/docs/toolbar.md#capture-screenshots-for-event-definitions).

## Permissions

The extension asks Chrome for these permissions:

| Permission | Why the extension needs it |
| --- | --- |
| Site access to http and https pages | To read the active tab's URL and run on it |
| `scripting` | To inject its content script |
| `storage` | To store the host and sign-in tokens |
| `sidePanel` | To show the side panel |

## Data the extension sends

The extension sends this data to your own PostHog host:

-   Authentication info
-   The active tab's URL
-   The website content that you save, such as element selectors and text in actions, variant HTML in experiments, and page screenshots for heatmaps or event screenshots

The extension also sends usage events about which tools you open to PostHog's product analytics.

The extension doesn't change the events that the page's own posthog-js sends.

## Limits

-   The extension works only in Chrome 116 or later.
-   It only runs on https pages, or on plain http on `localhost`.
-   It can't run on browser pages, such as the new tab page, or on the Chrome Web Store.
-   It only runs on pages whose origin is in your project's authorized URLs.
-   Feature flag overrides need the page to load posthog-js as `window.posthog`.