我的 Chrome 扩展程序在检查弹出窗口时显示以下错误:
Refused to load the script 'https://www.googletagmanager.com/gtag/js?id=UA-141660993-1' because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
和
popup.html:24 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-Vkhz36sQYUkOwiax3AeAWs1RWzXHB9cwliq07KbR/fI='), or a nonce ('nonce-...') is required to enable inline execution.
我将本教程代码复制到它们对应的文件中(manifest.json、popup.html 和popup.js)。它们是 create-react-app 的一部分，并且包含在同一目录中。此扩展利用 Google Analytics 来跟踪不同按钮的使用情况。检查弹出窗口时，它应该会显示有关按钮被点击频率的统计信息。相反，出现这两个错误。
弹出窗口正常显示，但跟踪功能不起作用。
根据教程，在 manifest.json 中添加以下行应该会覆盖阻止扩展工作的安全问题:
content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'
但是，这似乎对我不起作用。代码是逐字复制的(除了我在 popup.js 的第 8 行和 popup.html 的第 29 行中的 Google Analytics tracking Id 是我特有的)，所以我不确定问题出在哪里。
我包含了原始代码的链接(对于我的版本，我去掉了对图标的引用，因为它们使用的图像不可下载:
这里还有一个指向 Google Analytics 扩展教程的链接，以防它有帮助，但我不认为通读它一定会帮助任何人看到问题:
https://developer.chrome.com/extensions/tut_analytics
这是我的完整代码:
list .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'"
}
popup.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);
}
});
我的理解是有限的，因为我是这个主题的新手；但是，我依赖本教程代码正常工作，因此我可以通读并研究它。如果有人知道为什么我在检查此扩展程序的弹出窗口时会看到这些错误，我将非常感谢听到您的想法。非常感谢您，如果需要更多详细信息，请告诉我。
最佳答案
不幸的是，官方教程已经过时了。 这是现在对我有用的实现:
(编辑:这是 list v2 解决方案)
list .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.
关于javascript - 当我包含推荐的安全覆盖时，为什么脚本拒绝在 Google Analytics Chrome 扩展程序中加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56487671/