Index: chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js |
diff --git a/chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js b/chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js |
index 1719d8a91f4bb1d2f3c4d6fb1d3c79356d348009..33235e08cfe2a50020a16876a1a8fc812a8d97e0 100644 |
--- a/chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js |
+++ b/chrome/common/extensions/docs/examples/howto/contentscript_xhr/contentscript.js |
@@ -1,44 +1,69 @@ |
/* |
- * 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); |