Update contentscript xhr example to remove background page.

chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js

 /*
- * Copyright (c) 2010 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.
+* Copyright (c) 2011 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.
+*/
+
+/**
+ * Performs an XMLHttpRequest to Twitter's API to get trending topics.
+ *
+ * @param callback Function If the response from fetching url has a
+ *     HTTP status of 200, this function is called with a JSON decoded
+ *     response.  Otherwise, this function is called with null.
  */
+function fetchTwitterFeed(callback) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function(data) {
+    if (xhr.readyState == 4) {
+      if (xhr.status == 200) {
+        var data = JSON.parse(xhr.responseText);
+        callback(data);
+      } else {
+        callback(null);
+      }
+    }
+  }
+  // Note that any URL fetched here must be matched by a permission in
+  // the manifest.json file!
+  var url = 'https://api.twitter.com/1/trends.json?exclude=hashtags';
+  xhr.open('GET', url, true);
+  xhr.send();
+};
 
 /**
  * Parses text from Twitter's API and generates a bar with trending topics at
  * the top of the current page
+ *
  * @param data Object JSON decoded response.  Null if the request failed.
  */
 function onText(data) {
   // Only render the bar if the data is parsed into a format we recognize.
   if (data.trends) {
-    var trend_names = []
-    for (var date in data.trends) {
-      if (data.trends.hasOwnProperty(date)) {
-        var trends = data.trends[date];
-        for (var i=0,trend; trend = trends[i]; i++) {
-          trend_names.push(trend.name);
-        }
-      }
-    }
-
     // Create the overlay at the top of the page and fill it with data.
     var trends_dom = document.createElement('div');
     var title_dom = document.createElement('strong');
-    var text_dom = document.createTextNode(trend_names.join(', '));
-    title_dom.innerText = 'Topics currently trending on Twitter ';
+    title_dom.innerText = 'Topics currently trending on Twitter:';
     trends_dom.appendChild(title_dom);
-    trends_dom.appendChild(text_dom);
-    trends_dom.style.background = '#36b';
-    trends_dom.style.color = '#fff';
-    trends_dom.style.padding = '10px';
-    trends_dom.style.position = 'relative';
-    trends_dom.style.zIndex = '123456';
-    trends_dom.style.font = '14px Arial';
-    document.body.insertBefore(trends_dom, document.body.firstChild);
+    for (var i=0,trend; trend = data.trends[i]; i++) {
+      var link_dom = document.createElement('a');
+      link_dom.setAttribute('href', trend.url)
+      link_dom.innerText = trend.name;
+      link_dom.style.color = '#000';
+      trends_dom.appendChild(document.createTextNode(' '));
+      trends_dom.appendChild(link_dom);
+    }
+    trends_dom.style.cssText = [
+      'background-color: #ffd700;',
+      'background-image: -webkit-repeating-linear-gradient(' +
+          '45deg, transparent, transparent 35px,' +
+          'rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);',
+      'color: #000;',
+      'padding: 10px;',
+      'font: 14px Arial;'
+    ].join(' ');
+    document.body.style.cssText = 'position: relative';
+    document.body.parentElement.insertBefore(trends_dom, document.body);
   }
 };
 
-// Send a request to fetch data from Twitter's API to the background page.
-// Specify that onText should be called with the result.
-chrome.extension.sendRequest({'action' : 'fetchTwitterFeed'}, onText);
+fetchTwitterFeed(onText);