twitterのpublic TLを表示するgoogle chrome extensionを作ってみた
twitterのpublic TLを表示するgoogle chrome exntensionを作ってみました。そのソースを載せておきます。
public timelineの表示
public timelineの最新20件を取得し、ブラウザ上部に表示させます。
http://api.twitter.com/1/statuses/public_timeline.json にXMLHttpRequestでアクセスしてデータを取得します。
スナップショット
つぶやきは一定時間で変化していきます。
参考サイト
manifest.json
{
"name": "twitter client",
"version": "1.0",
"description": "display public timeline.",
"background_page": "background.html",
"permissions": [ "http://twitter.com/*", "http://api.twitter.com/*" ],
"content_scripts": [
{
"matches": [ "http://*/*" ],
"js": [ "content.js" ]
}
]
}
content.js
var statuses = new Array( ) ;
var index = 0 ;
var oldChild = null ;
function onText( data ) {
for( var i = 0; i < data.length; i++ ) {
statuses[ i ] = data[ i ].user.name + ' : ' + data[ i ].text ;
}
display( ) ;
startTimer( ) ;
}
function display( ) {
var timeline_dom = document.createElement('div') ;
var title_dom = document.createElement('strong') ;
var text_dom = document.createTextNode( statuses[ index ] ) ;
timeline_dom.appendChild( text_dom ) ;
timeline_dom.style.background = '#36b' ;
timeline_dom.style.color = '#fff' ;
timeline_dom.style.padding = '10px' ;
timeline_dom.style.position = 'relative' ;
timeline_dom.style.zIndex = '123456' ;
timeline_dom.style.font = '14px Arial' ;
if( oldChild )
document.body.removeChild( oldChild ) ;
document.body.insertBefore( timeline_dom, document.body.firstChild ) ;
oldChild = timeline_dom ;
index++ ;
if( index >= statuses.length )
index = 0 ;
}
function startTimer( ) {
setInterval( "display( )", 5000 ) ;
}
chrome.extension.sendRequest( { 'action' : 'timeline' }, onText ) ;setIntervalを使って、一定時間毎のつぶやき変更を実現しています。
background.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function access( callback ) {
var xhr = new XMLHttpRequest( ) ;
xhr.onreadystatechange = function( ) {
if ( xhr.readyState == 4 && xhr.status == 200 ) {
var json = eval( "(" + xhr.responseText + ")" ) ;
callback( json ) ;
}
}
var url = 'http://api.twitter.com/1/statuses/public_timeline.json' ;
xhr.open( 'GET', url, true ) ;
xhr.send( ) ;
}
function onRequest( request, sender, callback ) {
if( request.action == 'timeline' ) {
access( callback ) ;
}
}
chrome.extension.onRequest.addListener( onRequest ) ;
</script>
</body>
</html>
