How can I implement Mixpanel on my Chrome Extension?

It is certainly possible to use Mixpanel to track user actions within a Google Chrome Extension. While Mixpanel doesn’t specifically have a library for implementation on Chrome Extensions, many customers have successfully integrated using either the JavaScript library or directly via the HTTP API.

JavaScript

Implementing via the JavaScript library has some advantages, namely that it collects several default properties by default that you can use to learn more about your users. You can find full documentation for using the Mixpanel JavaScript library here.

In addition to reviewing the standard JavaScript implementation documentation, a few tips specific to Chrome Extensions:

  • Paste the Mixpanel JavaScript code snippet and your project's token within the mixpanel.init() function within the <head> tags at the top of the JavaScript file you will be loading within your extension.

  • Place tracking code in the <body> tags in between <script> tags.

  • Some users have reported receiving an error similar to the following in the console when implementing with the JavaScript library, which is related to Chrome’s Content Security Policy: "Mixpanel error: 'mixpanel' object not initialized. Ensure you are using the latest version of the Mixpanel JS Library along with the snippet we provide.”

  • Chrome requires extensions to load remote resources over HTTPS, so to resolve the error and force all XHR requests sent from your Mixpanel implementation to be sent via HTTPS rather than HTTP, make the following addendum to the mixpanel.init() function:

mixpanel.init("your token",{api_host:"https://api.mixpanel.com"})

HTTP

As an alternative to the JavaScript library, use Mixpanel’s HTTP Tracking API with Chrome Extensions to craft and send your own Mixpanel track calls.