OAuth認証を使ってtwitterのhome TL(friends TL)を表示するgoogle chrome extensionを作ってみた
はじめに
前回のエントリではtwitterのpublic TLを取得するgoogle chrome extensionを作成しました。
今回はhome TL(friends TL)を取得するextensionを作成してみました。そのソースを公開しておきます。
大変だった点
方針
とりあえず、アプリーション登録とaccess tokenを前もって手動で取得し、それらを直接コード中に埋め込むことにしました。
使用ライブラリ
googlecodeに置かれている、javascriptのoauthライブラリを使用します。
oauth.jsとsha1.jsを使用します。
jQueryも使用します。
スナップショット
見た目は前回のエントリと同じなので割愛。
ソースコード
manifest.json
{
"name": "twitter client",
"version": "1.0",
"description": "display friends 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 ) ;前回のエントリと同じコードです。
background.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.3.min.js"></script>
<script src="oauth.js"></script>
<script src="sha1.js"></script>
</head>
<body>
<script type="text/javascript">
var api = 'http://api.twitter.com/1/statuses/home_timeline.json' ;
var OAUTH_CONSUMER_KEY = 'dummy_consumer_key' ;
var OAUTH_CONSUMER_SECRET = 'dummy_consumer_secret' ;
var OAUTH_ACCESS_TOKEN = 'dummy_access_token' ;
var OAUTH_ACCESS_SECRET = 'dummy_access_secret' ;
function access( callback ) {
var accessor = {
consumerSecret: OAUTH_CONSUMER_SECRET,
tokenSecret: OAUTH_ACCESS_SECRET
} ;
var message = {
method: "GET",
action: api,
parameters: {
oauth_signature_method: "HMAC-SHA1",
oauth_consumer_key: OAUTH_CONSUMER_KEY,
oauth_token: OAUTH_ACCESS_TOKEN
}
} ;
OAuth.setTimestampAndNonce( message ) ;
OAuth.SignatureMethod.sign( message, accessor ) ;
var target = OAuth.addToURL( message.action, message.parameters ) ;
var options = {
type: message.method,
url: target,
dataType: 'json',
success: function( d, dt ) {
callback( d ) ;
},
error: function( a ) {
window.alert( a.responseText ) ;
},
timeout: 1000 * 50
};
$.ajax( options ) ;
}
function onRequest( request, sender, callback ) {
if( request.action == 'timeline' ) {
access( callback ) ;
}
}
chrome.extension.onRequest.addListener( onRequest ) ;
</script>
</body>
</html>ソースのほとんどはこちらから流用させてもらいました。
<script src="jquery-1.4.3.min.js"></script>
<script src="oauth.js"></script>
<script src="sha1.js"></script>上記3つのライブラリは、extensionと同じディレクトリに置いておきます。
