Can't integrate Mixpanel in a chrome extension under manifest v3

[brloman]

Im migrating a chrome extension from manifest v2 to manifest v3, which moves from background pages to service workers. As service workers don't have access to DOM, window, or document, loading mixpanel library now causes an error 'document undefined'.

Is there any solution to integrate Mixpanel in a chrome extension now that MV2 is deprecated?

[ba32107]

I'm having the same issue. https://github.com/mixpanel/mixpanel-js/issues/304 has some ideas on how to work around this. I'm currently debating using the code in that issue or just using the ingestion API and writing the client myself

[brloman]

I'm having the same issue. #304 has some ideas on how to work around this. I'm currently debating using the code in that issue or just using the ingestion API and writing the client myself

Im wondering how no one else mentioned that issue in #304.

[ba32107]

Probably depends on which exact config you pass to mixpanel, based on those it may or may not attempt to access document.

[brloman]

Interesting. Do you know which config could be changed to prevent accessing document?

I don't pass any specifc config upon initializing. I call init like this:

mixpanel.init("TOKEN", {api_host:"https://api.mixpanel.com"});

[ba32107]

Do you know which config could be changed to prevent accessing document?

You can check the source to see what's happening, but I don't think it's a good idea to try to guess this. You would essentially be relying on the internal implementation details of the library.

It's better to use the ingestion API, it's not hard. Take a look at https://developer.mixpanel.com/reference/track-event

[doc-han]

My comment here https://github.com/mixpanel/mixpanel-js/issues/304#issuecomment-2063496490 gives you a good idea of why mixpanel doesn't work in MV3. The issue isn't just DOM access.

[coccoalberto97]

Hey, there is something else that I think it's worth mentioning. I have an extension and I use it to inject a content-script in the dom. I can't use this library in the content script because it injects external code, which is not allowed.

I received a Blue Argon strike from the chrome dev team (Blue Argon docs). I was using an older version of this plugin and this was flagged:

Violating Content:
Code snippet:overlay.js: "var r = document.createElement("script"); r.src = e.resource_protocol + "[www.youtube.com/iframe_api](http://www.youtube.com/iframe_api)"; var i = document.getElementsByTagName("script")[0]; i.parentNode.insertBefore(r, i)"

I updated to v2.55.1 and that snipped is gone, but external script injection is still present in the bundle, I suppose it's just a matter of time before this one gets flagged as well:

https://github.com/mixpanel/mixpanel-js/blob/475b2c6853dd49ffc625daac3925bf37940ec390/src/mixpanel-core.js#L702

var script = document$1.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.defer = true;
script.src = url;
var s = document$1.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);