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

   1 /*
   2 * Copyright (c) 2011 The Chromium Authors. All rights reserved.
   3 * Use of this source code is governed by a BSD-style license that can be
   4 * found in the LICENSE file.
   5 */
   6
   7 /**
   8  * Performs an XMLHttpRequest to Twitter's API to get trending topics.
   9  *
  10  * @param callback Function If the response from fetching url has a
  11  *     HTTP status of 200, this function is called with a JSON decoded
  12  *     response.  Otherwise, this function is called with null.
  13  */
  14 function fetchTwitterFeed(callback) {
  15   var xhr = new XMLHttpRequest();
  16   xhr.onreadystatechange = function(data) {
  17     if (xhr.readyState == 4) {
  18       if (xhr.status == 200) {
  19         var data = JSON.parse(xhr.responseText);
  20         callback(data);
  21       } else {
  22         callback(null);
  23       }
  24     }
  25   }
  26   // Note that any URL fetched here must be matched by a permission in
  27   // the manifest.json file!
  28   var url = 'https://api.twitter.com/1/trends/daily.json?exclude=hashtags';
  29   xhr.open('GET', url, true);
  30   xhr.send();
  31 };
  32
  33 /**
  34  * Parses text from Twitter's API and generates a bar with trending topics at
  35  * the top of the current page
  36  *
  37  * @param data Object JSON decoded response.  Null if the request failed.
  38  */
  39 function onText(data) {
  40   // Only render the bar if the data is parsed into a format we recognize.
  41   if (data.trends) {
  42     // Create the overlay at the top of the page and fill it with data.
  43     var trends_dom = document.createElement('div');
  44     var title_dom = document.createElement('strong');
  45     title_dom.innerText = 'Topics currently trending on Twitter:';
  46     trends_dom.appendChild(title_dom);
  47     for (var key in data.trends) {
  48       for (var i=0,trend; trend = data.trends[key][i]; i++) {
  49         var link_dom = document.createElement('a');
  50         link_dom.setAttribute('href', trend.url)
  51         link_dom.innerText = trend.name;
  52         link_dom.style.color = '#000';
  53         trends_dom.appendChild(document.createTextNode(' '));
  54         trends_dom.appendChild(link_dom);
  55       }
  56       break;
  57     }
  58     trends_dom.style.cssText = [
  59       'background-color: #ffd700;',
  60       'background-image: -webkit-repeating-linear-gradient(' +
  61           '45deg, transparent, transparent 35px,' +
  62           'rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);',
  63       'color: #000;',
  64       'padding: 10px;',
  65       'font: 14px Arial;'
  66     ].join(' ');
  67     document.body.style.cssText = 'position: relative';
  68     document.body.parentElement.insertBefore(trends_dom, document.body);
  69   }
  70 };
  71
  72 fetchTwitterFeed(onText);