ポップアップを検査すると、Chrome拡張機能に次のエラーが表示されます。
次のコンテンツセキュリティポリシーディレクティブに違反しているため、スクリプト ' https://www.googletagmanager.com/gtag/js?id=UA-141660993-1 'の読み込みを拒否しました： "script-src'self ' https：// ssl .google-analytics.com "。'script-src-elem'は明示的に設定されていないため、 'script-src'がフォールバックとして使用されることに注意してください。
そして
popup.html：「スクリプト-srcの『自己』：24には、それは、次のコンテンツセキュリティポリシーの指示に違反しているため、インラインスクリプトを実行することを拒否https://ssl.google-analytics.comを」。インライン実行を有効にするには、「unsafe-inline」キーワード、ハッシュ（ 'sha256-Vkhz36sQYUkOwiax3AeAWs1RWzXHB9cwliq07KbR / fI ='）、またはナンス（ 'nonce -...'）のいずれかが必要です。
私は（それらに対応するファイルには、このチュートリアルのコードをコピーしmanifest.json、popup.html、およびpopup.js）。それらはの一部でありcreate-react-app、同じディレクトリに含まれています。この拡張機能は、Google Analyticsを利用して、さまざまなボタンの使用状況を追跡します。ポップアップを検査すると、ボタンがクリックされる頻度に関する統計が表示されるはずです。代わりに、これら2つのエラーが表示されます。
ポップアップは正しく表示されますが、追跡機能は機能しません。
チュートリアルによると、内に次の行を追加するmanifest.jsonと、拡張機能の動作を妨げるセキュリティの問題が無効になるはずです。
content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'
しかし、これは私にはうまくいかないようです。コードは一語一語コピーされているので（ただし、8popup.js行目と29行目のGoogle AnalyticsトラッキングIDはpopup.html私に固有のものです）、問題がどこにあるのかわかりません。
元のコードへのリンクを含めています（私のバージョンでは、使用した画像がダウンロードできなかったため、アイコンへの参照を削除しました：
ここにも、役立つ場合に備えて、Google Analytics拡張機能チュートリアルへのリンクがありますが、それを読むことで必ずしも誰かが問題を理解するのに役立つとは思いません。
https://developer.chrome.com/extensions/tut_analytics
これが私のコード全体です：
マニフェスト.json：
{
"name": "Event Tracking with Google Analytics",
"version": "2.0.0",
"description": "A sample extension which uses Google Analytics to track usage.",
"browser_action": {
"default_title": "Open the popup",
"default_popup" : "popup.html"
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}
ポップアップ.html：
<!DOCTYPE html>
<!--
* Copyright (c) 2012 The Chromium Authors. All rights reserved. Use of this
* source code is governed by a BSD-style license that can be found in the
* LICENSE file.
-->
<html>
<head>
<style>
body {
width: 300px;
color: #000;
font-family: Arial;
}
#output {
color: #d00;
text-align: center;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<h1>Popup</h1>
<p>Track the following actions:</p>
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
<button id='button4'>Button 4</button>
<button id='button5'>Button 5</button>
<button id='button6'>Button 6</button>
</body>
</html>
ポップアップ.js：
var _AnalyticsCode = 'UA-141660993-1';
var _gaq = _gaq || [];
_gaq.push(['_setAccount', _AnalyticsCode]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
function trackButtonClick(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
}
document.addEventListener('DOMContentLoaded', function () {
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
});
私はこの主題に慣れていないので、私の理解は限られています。ただし、このチュートリアルコードが正しく機能していることを信頼しているので、それを調べて調べることができます。この拡張機能のポップアップを調べたときに、なぜこれらのエラーが表示されるのかについて誰かが手がかりを持っている場合は、あなたの考えを聞いていただければ幸いです。よろしくお願いいたします。詳細が必要な場合はお知らせください。
残念ながら、公式チュートリアルは廃止されました。これが今私のために働く実装です：
マニフェスト.json：
"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://google-analytics.com; object-src 'self'",
GAの実行：
const ID = 'UA-XXXXX-XX';
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', ID, 'auto');
ga('set', 'checkProtocolTask', null); // Required: disables protocol checking.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加