Skip to content

Instantly share code, notes, and snippets.

Created September 23, 2021 07:45
Show Gist options
  • Save Joelkw/31b798f69c714c00e9e097b1fd4bb3c8 to your computer and use it in GitHub Desktop.
Save Joelkw/31b798f69c714c00e9e097b1fd4bb3c8 to your computer and use it in GitHub Desktop.
How to use analytics with a Chrome extension on manifest v3

How to use Plausible analytics in a Chrome Extension on Manifest v3

If you want to use analytics for a Chrome Extension on the new v3 manifest – which might be a better choice than Google Analytics if you care about GDPR compliance without needing a cookie consent banner - then you'll quickly hit some snags, so here's how to work around them.

Manifest v3 Content Security Policy

Chrome extensions no longer allow loading external scripts. This means you can't use

<script defer data-domain="" src=""></script>

Instead, you need to visit directly, then copy that script into a file in your extension itself.

Modifications to the Plausible snippet

You need to modify the default snippet above to look like:

<script src="plausible.js" data-api=""  data-domain=""></script>

Note it has the following modifications:

  1. src="plausible.js" is the name of the script you copied locally.
  2. data-api="" avoids a 404 error for the api/event file
  3. data-domain="" while Chrome extensions don't have domains, you should match this to whatever domain the plausible account is set up to track. You can make up a phrase if you're only tracking a Chrome extension.
Copy link

I would just add that the npm package is an alternative to this. I also am led to believe that trackEvent doesn't work in the extension context (adding the goal in Plausible won't show it on the dashboard), but loading the script manually like this would perhaps allow you to implement a workaround that can't be done when loading via npm package. Here's what I learned from a Plausible team member when I asked:

This is possible with our standard JavaScript approach though. If you were able to add some custom HTML and JavaScript to that extension popup, it should be possible to track it. You could use our manual script extension and implement the custom event. For example, something like this:

<!-- manual snippet -->
<script defer data-domain="[](" src=""></script>

<!-- define the `plausible` function to manually trigger events -->
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

<!-- trigger the custom event -->
document.addEventListener("your-custom-browser-event", function() {
    'Feedback star rating',
    {u: ""}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment