Geek asks and answers

Content Security Policy: Cannot load Mixpanel into Chrome extension

I struggled with this over the past day, and inaccessible resources are available for integrating Chrome Extensions and Mixpanel. I would like this thread to match what people refer to when it comes to integrating Mixpanel into the Chrome extension.

The purpose of my Mixpanel integration is to track events with both my script content content.jsand mine popup.js(this is basically the case throughout my extension)

I have a popup.html file that calls <script src="mixpanel.js"></script>right before the tag </head>.

In my file mixpanel.jsthere is:

(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,
e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);

mixpanel.init("MY_TOKEN");

When I click on my extension button and test it, the console displays the following error:

Refused to load the script 'http://cdn.mxpnl.com/libs/mixpanel-2.2.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://cdn.mxpnl.com".

Here is the permissions section of my file manifest.json:

"permissions": ["https://twitter.com/"],
  "content_security_policy": "script-src 'self' https://cdn.mxpnl.com; object-src 'self'"

Twitter.

, Google,

, ? !

+5
3

, Chrome HTTP; HTTPS:

"--" HTTP, [ , http:] .

mixpanel.js script http://cdn.mxpnl.com/libs/mixpanel-2.2.min.js https:. , :

a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js'


a.src='https://cdn.mxpnl.com/libs/mixpanel-2.2.min.js'

http:, window.location.protocol chrome-extension:, https:. https: .

+9

. .

1: HTTPS

, , mixpanel, http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js

2. manifest.json

content_security_policy manifest.json: { ..., "content_security_policy": "script-src 'self' https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js; object-src 'self'", ... }

.

3 []: Google Analytics

Google Analytics, : { ..., "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js; object-src 'self'", ... }

, Google Google Analytics.

+3

You can use this script to download mixpanel from a custom url.

<script>
  window.MIXPANEL_CUSTOM_LIB_URL = 'lib/mixpanel/mixpanel.js';
</script>
0
source

More articles:


All Articles