Menu
My Chrome extension, when the popup is inspected, shows the following errors:
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.
and
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.
I copied this tutorial code into their corresponding files (manifest.json, popup.html, and popup.js). They are part of a create-react-app and are contained in the same directory. This extension makes use of Google Analytics to track the usage of different buttons. When the popup is inspected, it is supposed to reveal statistics on how often buttons get clicked. Instead, these two errors appear.
The popup displays properly, but the tracking functionality does not work.
According to the tutorial, adding the following line within manifest.json is supposed to override security issues that block the extension from working:
content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'
However, this does not seem to be working for me. The code is copied word for word (except that my Google Analytics tracking Id in line 8 of popup.js and line 29 in popup.html is specific to me), so I'm not sure where the problem is.
I'm including a link to the original code (for my version, I got rid of the reference to icons because the images they used were not downloadable:
https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/tutorials/analytics/
Here, also, is a link to the Google Analytics extension tutorial in case it's helpful, though I don't imagine reading through it will necessarily help anyone see the problem:
https://developer.chrome.com/extensions/tut_analytics
Here is my code in its entirety:
manifest.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>
popup.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);
}
});
My understanding is limited, as I'm new to this subject; however, I rely on this tutorial code working correctly so I can go through and study it. If anyone has a clue as to why I'm seeing these errors upon inspecting the popup of this extension, I'd really appreciate hearing your thoughts. Thank you very much in advance, and please let me know if further detail is needed.
693
The official tutorial is obsolete, unfortunately. Here is the implementation, that works for me right now:
manifest.json:
"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://google-analytics.com; object-src 'self'",
Running 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
