Improving `content_security_policy` documentation.

chrome/common/extensions/docs/static/tut_analytics.html

 <div id="pageData-name" class="pageData">Tutorial: Google Analytics</div>
 <div id="pageData-showTOC" class="pageData">true</div>
 
 <p>This tutorial demonstrates using Google Analytics to track the usage of your
 extension.</p>
 
 <h2 id="toc-requirements">Requirements</h2>
 <p>
   This tutorial expects that you have some familiarity writing extensions for
   Google Chrome.  If you need information on how to write an extension, please
   read the <a href="gettingstarted.html">Getting Started tutorial</a>.
 </p>
 
 <p>
   You will also need a <a href="http://www.google.com/analytics">Google
-  Analytics account</a> set up to track your extension.  Note that when setting
+  Analytics account</a> set up to track your extension. Note that when setting
   up the account, you can use any value in the Website's URL field, as your
   extension will not have an URL of its own.
 </p>
 
 <p style="text-align: center">
   <img src="images/tut_analytics/screenshot01.png"
        style="width:400px;height:82px;"
        alt="The analytics setup with info for a chrome extension filled out." />
 </p>
 
-<p>
-  Also note that Google Analytics requires version <strong>4.0.302.2</strong>
-  of Google Chrome to work correctly.  Users with an earlier version of Google
-  Chrome will not show up on your Google Analytics reports.  View
-  <a href="faq.html#faq-dev-14">this FAQ entry</a> to learn how to check which
-  version of Google Chrome is deployed to which platform.
-</p>
-
 <h2 id="toc-installing">Installing the tracking code</h2>
 
 <p>
   The standard Google Analytics tracking code snippet fetches a file named
   <code>ga.js</code> from an SSL protected URL if the current page
-  was loaded using the <code>https://</code> protocol.  <strong>It is strongly
-  advised to use the SSL protected ga.js in an extension</strong>,
-  but Google Chrome extension
-  pages are hosted under <code>chrome-extension://</code> URLs, so the tracking
-  snippet must be modified slightly to pull <code>ga.js</code> directly from
-  <code>https://ssl.google-analytics.com/ga.js</code> instead of the default
-  location.
+  was loaded using the <code>https://</code> protocol.  <strong>Chrome
+  extensions and applications may <em>only</em> use the SSL-protected version of
+  <code>ga.js</code></strong>. Loading <code>ga.js</code> over insecure HTTP is
+  disallowed by Chrome's default <a href="contentSecurityPolicy.html">Content
+  Security Policy</a>. This, plus the fact that Chrome extensions are hosted
+  under the <code>chrome-extension://</code> schema, requires a slight
+  modification to the usual tracking snippet to pull <code>ga.js</code> directly
+  from <code>https://ssl.google-analytics.com/ga.js</code> instead of the
+  default location.
 </p>
 
 <p>
   Below is a modified snippet for the
   <a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html">asynchronous
   tracking API</a> (the modified line is bolded):
 </p>
 
 <pre>
 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   <strong>ga.src = 'https://ssl.google-analytics.com/ga.js';</strong>
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 </pre>
 
 <p>
-  Here is a background page which loads the asynchronous tracking code and
+  You'll also need to ensure that your extension has access to load the resource
+  by relaxing the default content security policy. The policy definition in your
+  <a href="manifest.html"><code>manifest.json</code></a> might look like:
+</p>
+
+<pre>{
+  ...,
+  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
+  ...
+}</pre>
+
+<p>
+  Here is a popup page (<code>popup.html</code>) which loads the asynchronous
+  tracking code via an external JavaScript file (<code>popup.js</code>) and
   tracks a single page view:
 </p>
 
-<pre>
+<pre>popup.js:
+=========
+
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
+_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);
+})();
+
+popup.html:
+===========
 &lt;!DOCTYPE html>
 &lt;html>
  &lt;head>
    ...
+  &lt;script src="popup.js">&lt;/script>
  &lt;/head>
  &lt;body>
-   &lt;script>
-     var _gaq = _gaq || [];
-     _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
-     _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);
-     })();
-   &lt;/script>
-
    ...
  &lt;/body>
 &lt;/html>
 </pre>
 
 <p>
   Keep in mind that the string <code>UA-XXXXXXXX-X</code> should be replaced
   with your own Google Analytics account number.
 </p>
 
@@ skipping 38 matching lines @@
 
 <h2 id="toc-tracking-events">Tracking events</h2>
 
 <p>
   By configuring event tracking, you can determine which parts of your
   extension your users interact with the most.  For example, if you have
   three buttons users may click:
 </p>
 
 <pre>
-  &lt;button>Button 1&lt;/button>
-  &lt;button>Button 2&lt;/button>
-  &lt;button>Button 3&lt;/button>
+  &lt;button id='button1'>Button 1&lt;/button>
+  &lt;button id='button2'>Button 2&lt;/button>
+  &lt;button id='button3'>Button 3&lt;/button>
 </pre>
 
 <p>
   Write a function that sends click events to Google Analytics:
 </p>
 
 <pre>
-  function trackButton(button_id) {
-    _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']);
+  function trackButton(e) {
+    _gaq.push(['_trackEvent', e.target.id, 'clicked']);
   };
 </pre>
 
 <p>
-  And call it when each button is pressed:
+  And use it as an event handler for each button's click:
 </p>
 
 <pre>
-  &lt;button onclick="trackButton(1);">Button 1&lt;/button>
-  &lt;button onclick="trackButton(2);">Button 2&lt;/button>
-  &lt;button onclick="trackButton(3);">Button 3&lt;/button>
+  var buttons = document.querySelectorAll('button');
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', trackButtonClick);
+  }
 </pre>
 
 <p>
   The Google Analytics event tracking overview page will give you metrics
   regarding how many times each individual button is clicked:
 </p>
 
 <p style="text-align: center">
   <img src="images/tut_analytics/screenshot03.png"
        style="width:300px;height:482px;"
@@ skipping 17 matching lines @@
 
 <p>
   A sample extension that uses these techniques is
   available in the Chromium source tree:
 </p>
 
 <blockquote>
   <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/analytics/">.../examples/tutorials/analytics/</a>
 </blockquote>
 </p>