Twitter OAuth callback URL for a Chrome extension

Question

I'm trying to develop a Chrome extension on which people can sign in with their Twitter account (using OAuth 1.0A).

I have not provided the callback URL in the Twitter application settings so far, so the user is returned a PIN to enter on the extension to complete the authorization process. But I don't want to implement the final PIN verification step in the extension.

Instead, I'd like that once the user was redirected to Twitter and authorized the app to access his account, he is automatically logged into the extension and can use it in order to post tweets.

I know I should definee a callback URL but I have no idea on what to use. I've been struggling for several days, during which I tried multiple things (like chrome://extensions/extension_id/ but it's not accepted by Twitter). I didn't manage to find the solution.

Any idea on what should be the callback URL? And what should contain the file pointed by that URL?

lambtron lambtron · Accepted Answer · 2017-06-18T23:46:50

I know this is incredibly old, but I had the same issue and finally figured out how to do it, so hopefully this helps other people who find this.

In your twitter apps configuration, you have to add a callback URL to a domain. Then, in your chrome extension, you have to have a content script that is injected on that same domain. The content script will have some logic that will parse the query string for the auth tokens and send that as a message to your background script. Then, in your background script, you can use those tokens to get the actual oauth tokens, which are then saved to local storage or chrome.storage.

Here is a brief example:

in your manifest.json, make sure your content script matches the same domain that you put in your twitter app settings callback URL:
```
"content_scripts": [{
    "matches": ["https://andyjiang.com/*"],
    "js": ["js/session.js"]
}]
```

Then, in your js/session.js file, have this sort of logic:

chrome.runtime.sendMessage({type: 'auth', session: 
window.location.search.substr(1)}, function(response) {
    window.open('', '_self', '');
    window.close();
});

In your background script, have some logic that listens for the message, gets the token, and uses Twitter's API for the third leg of the oauth process to finally get the oauth token and oauth token secret, which you can then save in localStorage or chrome.storage.

Hope that helps. Here is sample code if you want to play around with it.

https://github.com/lambtron/chrome-extension-twitter-oauth-example

Twitter OAuth callback URL for a Chrome extension

1 Answers