ミッションたぶんPossible

どこにでもいるシステムエンジニアのなんでもない日記です。たぶん。

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;
}