title: Why are scripts refusing to load in Google Analytics Chrome extension when I included the recommended security override?
body: <p>My Chrome extension, when the popup is inspected, shows the following errors:</p>
  
  <blockquote>
    <p>Refused to load the script '<a href="https://www.googletagmanager.com/gtag/js?id=UA-141660993-1" rel="nofollow noreferrer">https://www.googletagmanager.com/gtag/js?id=UA-141660993-1</a>' because it violates the following Content Security Policy directive: "script-src 'self' <a href="https://ssl.google-analytics.com" rel="nofollow noreferrer">https://ssl.google-analytics.com</a>". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.</p>
  </blockquote>
  
  <p>and </p>
  
  <blockquote>
    <p>popup.html:24 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' <a href="https://ssl.google-analytics.com" rel="nofollow noreferrer">https://ssl.google-analytics.com</a>". Either the 'unsafe-inline' keyword, a hash ('sha256-Vkhz36sQYUkOwiax3AeAWs1RWzXHB9cwliq07KbR/fI='), or a nonce ('nonce-...') is required to enable inline execution.</p>
  </blockquote>
  
  <p>I copied this tutorial code into their corresponding files (<code>manifest.json</code>, <code>popup.html</code>, and <code>popup.js</code>).  They are part of a <code>create-react-app</code> 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. </p>
  
  <p>The popup displays properly, but the tracking functionality does not work.</p>
  
  <p>According to the tutorial, adding the following line within <code>manifest.json</code> is supposed to override security issues that block the extension from working:</p>
  
  <pre><code>content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'
  </code></pre>
  
  <p>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 <code>popup.js</code> and line 29 in <code>popup.html</code> is specific to me), so I'm not sure where the problem is.  </p>
  
  <hr>
  
  <p>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:</p>
  
  <p><a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/tutorials/analytics/" rel="nofollow noreferrer">https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/tutorials/analytics/</a></p>
  
  <p>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:</p>
  
  <p><a href="https://developer.chrome.com/extensions/tut_analytics" rel="nofollow noreferrer">https://developer.chrome.com/extensions/tut_analytics</a></p>
  
  <p>Here is my code in its entirety:</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
    "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'"
  }
  </code></pre>
  
  <p>popup.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
   * 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.
  --&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body {
          width: 300px;
          color: #000;
          font-family: Arial;
        }
        #output {
          color: #d00;
          text-align: center;
        }
      &lt;/style&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Popup&lt;/h1&gt;
      &lt;p&gt;Track the following actions:&lt;/p&gt;
      &lt;button id='button1'&gt;Button 1&lt;/button&gt;
      &lt;button id='button2'&gt;Button 2&lt;/button&gt;
      &lt;button id='button3'&gt;Button 3&lt;/button&gt;
      &lt;button id='button4'&gt;Button 4&lt;/button&gt;
      &lt;button id='button5'&gt;Button 5&lt;/button&gt;
      &lt;button id='button6'&gt;Button 6&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>popup.js:</p>
  
  <pre><code>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 &lt; buttons.length; i++) {
      buttons[i].addEventListener('click', trackButtonClick);
    }
  });
  </code></pre>
  
  <p>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.</p>