How to use plausible.io analytics with a Chrome extension on manifest v3

Plausible_analytics_chrome_extension_v3_manifest..md

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

If you want to use Plausible.io 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="yourdomain.com" src="https://plausible.io/js/plausible.js"></script>

Instead, you need to visit https://plausible.io/js/plausible.js 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="https://plausible.io/api/event"  data-domain="your-extension.com"></script>

Note it has the following modifications:

1. src="plausible.js" is the name of the script you copied locally.
2. data-api="https://plausible.io/api/event" avoids a 404 error for the api/event file
3. data-domain="your-extension.com" 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.

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="[yourdomain.com](http://yourdomain.com/)" src="https://plausible.io/js/script.manual.js"></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 -->
<script>
document.addEventListener("your-custom-browser-event", function() {
  plausible(
    'Feedback star rating',
    {u: "https://yourdomain.com/my-custom-location"}
  )
})
</script>