Hi,
I’ve tried to adapt the Google OAuth tutorial (https://developer.chrome.com/extensions/tut_oauth) to create an extension that can connect to Twitter.
Here is my code: (the other files are identical to the ones provided in the tutorial)
{
"name": "OAuth Twitter",
"version": "1.0.6",
"icons": { "48": "img/icon-48.png",
"128": "img/icon-128.png" },
"description": "Uses OAuth to connect to Twitter.",
"background": {
"scripts": [
"chrome_ex_oauthsimple.js",
"chrome_ex_oauth.js",
"background.js"
]
},
"browser_action": {
"default_title": "",
"default_icon": "img/icon-19-off.png"
},
"permissions": [
"tabs",
"https://api.twitter.com/1.1/*",
"https://api.twitter.com/oauth/request_token",
"https://api.twitter.com/oauth/authorize",
"https://api.twitter.com/oauth/access_token"
],
"manifest_version": 2
}
manifest.json
<javascript>
var oauth = ChromeExOAuth.initBackgroundPage({
'request_url' : 'https://api.twitter.com/oauth/request_token',
'authorize_url' : 'https://api.twitter.com/oauth/authorize',
'access_url' : 'https://api.twitter.com/oauth/access_token',
'consumer_key' : 'MY_KEY',
'consumer_secret' : 'MY_SECRET',
'scope' : 'https://api.twitter.com/1.1/',
'app_name' : 'MY_APP'
});
function onTest(text, xhr) {
chrome.tabs.create({ 'url' : 'test.html'});
};
function doTest() {
oauth.authorize(function() {
console.log("on authorize");
var url = "https://api.twitter.com/1.1/statuses/user_timeline.json";
var request = {
'method': 'GET',
'parameters' : {
'screen_name': 'ndrezet',
'count': '2'
}
};
oauth.sendSignedRequest(url, onTest, request);
});
};
function logout() {
oauth.clearTokens();
setIcon();
};
chrome.browserAction.onClicked.addListener(doTest);
</javascript>
background.js
<!DOCTYPE html>
<html>
<head>
<title>OAuth Redirect Page</title>
<style type="text/css">
body {
font: 16px Arial;
color: #333;
}
</style>
<script type="text/javascript" src="chrome_ex_oauthsimple.js"></script>
<script type="text/javascript" src="chrome_ex_oauth.js"></script>
<script type="text/javascript" src="onload.js"></script>
</head>
<body>
Redirecting...
</body>
</html>
chrome_ex_oauth.html
<javascript>
window.onload = function() {
ChromeExOAuth.initCallbackPage();
}
</javascript>
onload.js
So far, every time I click on the extension I get stuck on a webpage “Redirecting…”.
Do you have any idea of what I’m doing wrong? And what should be the value of the callback URL in the Twitter app settings?
I realized that when I use the twitteroauth PHP library https://github.com/abraham/twitteroauth on a local server and I set the callback URL to “http://127.0.0.1/twitteroauth/callback.php”, I am no longer stuck on the above webpage. Instead, I manage to get to the Twitter webpage when I’m asked to authorize the app to use my account. The problem is when I click on “Authorize app”, I only see a blank page.
I hope that all my explanations make sense. Thanks for your help.
