6

过去一天我一直在为此苦苦挣扎，并且几乎没有在线资源可用于集成 Chrome 扩展程序和 Mixpanel。我希望这个线程是人们在处理将 Mixpanel 集成到 Chrome 扩展时所指的那个线程。

我的 Mixpanel 集成的目标是能够使用我的内容脚本content.js和我的popup.js（所以基本上在我的整个扩展中）跟踪事件

我有一个 popup.html 文件，它在标签<script src="mixpanel.js"></script>之前调用。</head>

在我的mixpanel.js文件中是：

(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");

当我单击我的扩展程序按钮并检查它时，控制台会输出以下错误：

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".

这是我manifest.json文件的权限部分：

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

该扩展需要在 Twitter 上运行。

我已阅读 Google 编写的内容安全政策文档，但没有帮助

知道我在这里做错了什么吗？任何帮助将不胜感激！

4

3 回答 3

9

这里的问题是 Chrome 不允许扩展通过普通 HTTP 加载远程资源；仅允许使用 HTTPS：

由于中间人攻击在 HTTP 上是微不足道且无法检测到的，因此这些 [ie, http:] 来源将不会被接受。

您的mixpanel.js脚本尝试加载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.protocolis chrome-extension:，而不是https:. 此更改只是强制https:始终加载版本。

于 2013-04-05T15:43:27.357 回答
5

上面的答案不完整。你必须再做一件事。

第 1 步：添加 HTTPS

做其他答案告诉你做的事情，更改混合面板代码，更改 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的教程中学习了如何做到这一点。

于 2014-12-27T16:41:08.027 回答
0

您可以使用此脚本从自定义 url 加载 mixpanel。

<script>
  window.MIXPANEL_CUSTOM_LIB_URL = 'lib/mixpanel/mixpanel.js';
</script>
于 2015-07-04T22:26:57.463 回答