dW

Tweet from Opera’s Address Bar

EDIT: This is outdated information. I provided a better solution a week later.

A few weeks ago my good friend Oleg Melnychuck thought it’d be awesome to have Twitter integration in Opera. I agree wholeheartedly, but I don’t think Opera would add it. I thought that sending a tweet using Opera’s custom search feature would work by right-clicking on the update form on my Twitter and going to “Create Search”. That will work as long as there’s an active auth session, so it’s not usable unless you’ve already logged in.

Yesterday afternoon it came to me that I could use JavaScript and XMLHTTPRequest to send the POST data. Well, that didn’t work because cross-site requests aren’t allowed. I was about to give up when it came to me to use an object element (standards replacement for iframe) that contained a document with a form and some JavaScript to automatically submit the form. Then after that is done the script would redirect to the user’s Twitter page. The document within the object element is included using a data URI so I could include the %s required by Opera to substitute the query text. I initially tried to use it as pure JavaScript with a javascript URI, but it didn’t work all the time in Opera because if typed into the address bar when a blank document or Speed Dial was active nothing would happen as the JavaScript didn’t have a document to replace as neither the blank document nor Speed Dial is markup. My only other option was to make it be a data URI. It’s ugly, but it does work:

data:text/html,%3C%21DOCTYPE%20html%3E%3Chtml%20lang%3D%22en%22%3E%3Chead%3E%3Cmeta%20charset%3D%22UTF-8%22%3E%3Ctitle%3ETweet%3C%2Ftitle%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Eobject%7Bvisibility%3Ahidden%3B%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Efunction%20enc%28text%29%7Breturn%20encodeURI%28text%29.replace%28%2F%5C%2B%2Fg%2C%27%2520%27%29%3B%7D%20var%20tweet%3Denc%28%27%s%27%29%3Bvar%20username%3Denc%28%27ook%27%29%3Bvar%20password%3Denc%28%27eek%27%29%3Bdocument.write%28%27%3Cobject%20data%3D%22data%3Atext%2Fhtml%2C%253C%2521DOCTYPE%2520html%253E%253Chtml%2520lang%253D%2522en%2522%253E%253Chead%253E%253Cmeta%2520charset%253D%2522UTF-8%2522%253E%253Ctitle%253ETweet%2521%2520Tweet%2521%253C%252Ftitle%253E%253C%252Fhead%253E%253Cbody%253E%253Cform%2520method%253D%2522POST%2522%2520action%253D%2522http%253A%252F%252F%27%2Busername%2B%27%253A%27%2Bpassword%2B%27%2540twitter.com%252Fstatuses%252Fupdate.xml%2522%2520name%253D%2522tweet%2522%253E%253Ctextarea%2520name%253D%2522status%2522%253E%27%2Btweet%2B%27%253C%252Ftextarea%253E%253Cinput%2520type%253D%2522submit%2522%253E%253C%252Fform%253E%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253Edocument.tweet.submit%2528%2529%253B%253C%252Fscript%253E%253C%252Fbody%253E%253C%252Fhtml%253E%22%3E%3C%2Fobject%3E%27%29%3B%20window.location%3D%27http%3A%2F%2Ftwitter.com%2F%27%2Busername%3B%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E

To use it follow these directions:

1. Copy the long data URI into a text editor and do a text replacement for “ook” then replace it with your twitter username.
2. Do a text replacement for “eek” and replace it with your password.
3. Go to Tools → Preferences (or Opera → Preferences on Mac OS X).
4. Click on the Search tab then click the Add… button.
5. In the input box labeled Name type in Twitter.
6. Type in a suitable keyword in the Keyword field. I use tw.
7. Paste in the data URI from your text editor into the Address field and click OK.

Now you should be able to type tw Tweet! and update your status on Twitter with “Tweet!”. As this is just a proof-of-concept it can be expanded to do more such as display an error if you’ve typed in more than 140 characters among other things. I just thought I’d challenge myself to see if it could be done.