How to resovle – "Refused to execute inline script because it violates the following Content Security Policy"

I'm setting up Mixpanel in a simple chrome extension using Vanilla JS. I'm not using NPM but following this docs.

Below is my set-up where I pull in the Mixpanel SDK in the Index.html:

<!DOCTYPE html>
<html lang="en">
<head>

    <script type="text/javascript">
    <!-- Paste this right before your closing </head> tag -->
<script type="text/javascript">
  (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);
</script>
</head>
<body>
    <script type="module" src="popup.js"></script>
</body>
</html>

Within my popup.js I reference the below

 //Import Mixpanel SDK
import mixpanel from "mixpanel-browser";
 
// Near entry of your product, init Mixpanel
mixpanel.init("0000", {
  debug: true,
  track_pageview: true,
  persistence: "localStorage",
});

I see the following errors in the console when I check to see if Mixpanel object exist

  index.html:12 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-6VDlGRSSdUDK2nuG1Ys7GZ0tuFVwEcvszIXy9+2ULI4='), or a nonce ('nonce-...') is required to enable inline execution.

index.html:12 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-6VDlGRSSdUDK2nuG1Ys7GZ0tuFVwEcv'), or a nonce ('nonce-...') is required to enable inline execution.

index.html:1 Uncaught TypeError: Failed to resolve module specifier "mixpanel-browser". Relative references must start with either "/", "./", or "../".

Solution

Update (Current answer)

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Assumed you've moved inline code to a separate file -->
    <script src="mixpanel-init.js"></script>
</head>
<body>
    <!--You don't need to mention type="module" now. -->
    <script src="popup.js"></script> 
</body>
</html>

mixpanel-init.js

(function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);

// In this code I've replaced:
// "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"

// With this as fixed protocol to avoid wrong protocol used like "chrome-extension:".
// "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"

While the mixpanel-init.js code inserting cdn link we need to allow that origin.

So add this to manifest.json file to avoid CSP error:

"content_security_policy": {
    "extension_pages": "script-src 'self' https://cdn.mxpnl.com; object-src 'self'"
}

Update (Old):

If you are not familiar with Webpack then you can follow these methods:

Method 1: Use CDN (Content delivery network) link.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Assumed you've moved inline code to a separate file -->
    <script src="mixpanel-init.js"></script>
</head>
<body>

    <!-- Mixpanel CDN -->
    <script src="https://cdn.jsdelivr.net/npm/mixpanel-browser@2.7.2/mixpanel.min.js"></script>

    <!--You don't need to mention type="module" now. -->
    <script src="popup.js"></script> 
</body>
</html>

mixpanel-init.js

(function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);

popup.js

// Removed import statement 'import mixpanel from "mixpanel-browser";'. 
// While it's no longer needed due to CDN file.

mixpanel.init("0000", {
  debug: true,
  track_pageview: true,
  persistence: "localStorage",
});

Method 2: Manually download and include mixpanel library.

You can simply download this https://cdn.jsdelivr.net/npm/mixpanel-browser@2.7.2/mixpanel.min.js to your project directory then include:

<script src="path/to/mixpanel.min.js"></script>

Instead of

<script src="https://cdn.jsdelivr.net/npm/mixpanel-browser@2.7.2/mixpanel.min.js"></script>

Here I have used mixpanel version @2.7.2

If you want to use any specific version select here: https://cdn.jsdelivr.net/npm/mixpanel-browser@2.7.2/

If you don't mention @version then you will get latest version.

<script src="https://cdn.jsdelivr.net/npm/mixpanel-browser"></script>

If you need any help please feel free to ask. I'm happy to help :-)

Original Answer:

I can see two issues in your code:

Content Security Policy
Module resolution issue

1. Solution - Content Security Policy

Chrome extensions have a default Content Security Policy that blocks inline scripts for security reasons. You have two options to solve this issue.

Option 1: Move this inline script to an external file (eg: mixpanel-init.js).

(function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);

Then your code would look something like this.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="mixpanel-init.js"></script>
</head>
<body>
    <script type="module" src="popup.js"></script>
</body>
</html>

Option 2: Use a CSP (Content Security Policy) directive to all inline scripts - But this method is generally not recommended because of security risks. But if you want to keep the script inline, you can add this to your CSP in the extension's manifest.json.

"content_security_policy": "script-src 'self' 'sha256-6VDlGRSSdUDK2nuG1Ys7GZ0tuFVwEcvszIXy9+2ULI4='; object-src 'self';"

Just replace the hash sha256-... value with the correct one.

2. Solution - Module resolution issue

As you said you are not using npm then you must not have installed the "mixpanel-browser" then it's obvious that you get this error.
To solve this issue you should Install Mixpanel.

npm install --save mixpanel-browser

Also you have to bundle your code using Webpack or any other tools otherwise you get same error again because you're trying to use an ES module import import mixpanel from "mixpanel-browser";

If you need any additional help feel free to ask. I'm happy to help.