6

私はこの 1 日間これに苦労してきましたが、Chrome 拡張機能と Mixpanel を統合するためにオンラインで利用できるリソースはほとんどまたはまったくありません。このスレッドは、Mixpanel を Chrome 拡張機能に統合する際に人々が参照するスレッドにしたいと思います。

私の Mixpanel 統合の目標は、コンテンツ スクリプトと私の両方でイベントを追跡できるようにすることです (つまり、content.js基本popup.js的には拡張機能全体で)

タグ<script src="mixpanel.js"></script>の直前に呼び出す popup.html ファイルがあります。</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

ここでの問題は、拡張機能がプレーンな HTTP 経由でリモート リソースをロードすることを Chrome が許可していないことです。HTTPS のみが許可されます。

man-in-the-middle 攻撃は取るに足らないものであり、HTTP では検出できないため、これらの [つまりhttp:] オリジンは受け入れられません。

スクリプトは、対応するリンクの代わりにmixpanel.jsロードしようとします。これを修正するには、次の行を変更するだけです。http://cdn.mxpnl.com/libs/mixpanel-2.2.min.jshttps:

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.protocolchrome-extension:https:https:

于 2013-04-05T15:43:27.357 に答える
5

上記の回答は不完全です。もう1つやらなければならないことがあります。

ステップ 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 アナリティクスの追加

Google アナリティクスも必要な場合は、次のように追加できます。 { ..., "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 独自のチュートリアルから学びました。

于 2014-12-27T16:41:08.027 に答える