Build Chrome extensions quicker with a TypeScript boilerplate project
Download

Log Chrome extension telemetry with Azure App Insights

ExtensionNinja | 3/4/2021

Azure App Insights is a telemetry logging service from Microsoft. It’s a great alternative to Google Analytics for logging Chrome extension telemetry. App Insights has a generous free tier and is very easy to set up.

Adding App Insights to your extension

You can add App Insights as a single .JS file or as a NPM dependency in case you have TypeScript and Webpack setup.

If you are already using the Extension.Ninja Chrome Extension TypeScript boilerplate project, you can add App Insights as a dependency in the package.json file.

"dependencies": {
    "@microsoft/applicationinsights-web": "2.5.11"
}

Initializing App Insights in the background script

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

const telemetry = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
    }
});

telemetry.loadAppInsights();

The best part about using TypeScript and WebPack setup is that App Insights will be compiled to your background script and you won’t need to figure out how to load the library. This also satisfies the requirement of no remote code execution in manifest v3.

Logging extension events

telemetry.trackEvent({
    name: name,
    properties: {
        extensionName: ”extension name”,
    }
});

Logging extension exceptions

telemetry.trackException({
    exception: err,
    properties: {
        extensionName: ”extension name”,
    }
});

Logging from content script

It’s best to keep your telemetry in one place and have Application Insights initialized only in one place - the background script. You can write a thin wrapper for the content script to use a similar interface as Application Insights and send data to the background page via message passing.

Don't miss latest Chrome extension developer news

Join Newsletter