Chrome拡張でRSSフィードを読み込む
jQueryを使ってRSSフィードを読み込んで表示するChrome拡張です。今回は自分のはてなブックマークのRSSを読み込みました。…デザインが最悪ですねぇ、CSSなんとかしないと。ソースコードは以下。
manifest.json
{ "name":"RSS Feed", "version":"1.0", "description":"習作:自分のはてブのRSSを読み込むよ", "browser_action":{ "default_icon":"feed.png", "popup":"popup.html" }, "permissions":[ "http://b.hatena.ne.jp/takigawa401/rss" ] }
popup.html
<html> <head> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="feed.js"></script> <link rel="stylesheet" type="text/css" href="feed.css" /> </head> <body> <script type="text/javascript"> getFeeds(); </script> <div id="bookmark" class="feed"></div> </body> </html>
feed.js
function getFeeds() { $.ajax({ url : "http://b.hatena.ne.jp/takigawa401/rss", type : "GET", dataType : "xml", timeout : 5000, success : function(xml) { var list_ = ($('<ul></ul>')); var items = $(xml).find('item'); $(xml).find('item').each(function() { var elem_ = $('<li></li>') .append($('<a href="' + $(this).find('link').text() + '" id="link_' + i + '" target="_blank">' + $(this).find('title').text() + '</a>') ); list_.append(elem_); }); for(var i = 0; i < items.length; i++) { var item_ = items[i]; } $('#bookmark').append(list_); }, error : function(xhr, textStatus, errorThrown) { $('#bookmark').html("error:" + xhr.status); } }); }
feed.css
feed { position:fixed; right:30px; bottom:20px; font-size:22px; font-family:Century Gothic; text-align:center; padding:10px; background-color:#030303; color:#0F0F0F; border-radius:0.2em; opacity:0.80; z-index:10000; } body { min-width:400px; }