< Day Day Up > |
Hack 65. Select Your Yahoo! ID from a List
Add a drop-down menu on Yahoo!'s login form to select your username. Do you have multiple Yahoo! accounts? Are you tired of typing them over and over when switching back and forth between them? Are you sick of hacks that begin with rhetorical questions? I can't help you with that last one, but here's a hack that gives you a drop-down menu of all your Yahoo! IDs in the Yahoo! login form. 7.7.1. The CodeThis user script runs on all Yahoo! pages, but the first thing it does is check for the existence of the Yahoo! login form. If it doesn't find a login form, it just exits without doing anything. If it does find the login form, it sets a short timer to replace the username input box with a drop-down menu of your Yahoo! IDs. Edit the following user script to include your Yahoo! IDs, and then save it as yahoo-select.user.js: // ==UserScript== // @name Yahoo! User Persitance Thing // @namespace http://www.rhyley.org/gm/ // @description Add a drop-down box to the Yahoo login form // @include http*://*.yahoo.tld/* // ==/UserScript== // based on code by Jason Rhyley // and included here with his gracious permission // ** Replace this array with your Yahoo IDs ** var gUserIDs = new Array("Put","Your","User","ID","Here"); var login = null; var password = null; function buildLoginThing( ) { if (gUserIDs[0] == 'Put'){ alert('You must configure the script before it will \n' + 'work propery. Go to "Manage User Scripts" and\n' + 'click the \"Edit\" button to configure the script.'); return; } var elmSelect = document.createElement("select"); elmSelect.id = "username"; elmSelect.name = "login"; elmSelect.className = "yreg_ipt"; elmSelect.addEventListener('change', function( ) { if (this.selectedIndex == this.options.length-1) { window.setTimeout(function( ) { var elmNew = document.createElement("input"); elmNew.type = "text"; elmNew.id = "username"; elmNew.name = "login"; elmNew.className = "yreg_ipt"; login.parentNode.replaceChild(elmNew, login); login = elmNew; login.focus( ); }, 0); } else { password.focus( ); } }, true); var arOptions = new Array( ); for (var i in gUserIDs) { arOptions[i] = document.createElement("option"); arOptions[i].value = gUserIDs[i]; arOptions[i].text = gUserIDs[i]; elmSelect.appendChild(arOptions[i]); } arOptions[i] = document.createElement("option"); arOptions[i].text = "Other…"; elmSelect.appendChild(arOptions[i]); login.parentNode.replaceChild(elmSelect, login); login = elmSelect; } if (document.forms.length) { for (var k = 0; k < document.forms.length; k++) { var elmForm = document.forms[k]; if (elmForm.action.indexOf('login.yahoo.com') != -1) { elmForm.addEventListener('submit', function(e) { e.stopPropagation( ); e.preventDefault( ); }, true); login = elmForm.elements.namedItem('login'); password = elmForm.elements.namedItem('passwd'); break; } } } if (!login) { return; } if (location.href.indexOf("mail.yahoo.com") != -1) { location.href = "http://login.yahoo.com/config/login?.done=" + "http%3a%2f%2fmail%2eyahoo%2ecom"; } else { buildLoginThing( ); setTimeout(function( ) { password.focus( ); }, 100); } 7.7.2. Running the HackAfter editing this script to include your Yahoo! IDs, install it (Tools Install This User Script) and go to http://mail.yahoo.com. (Log out if youre already logged in, and then go back to the login page.) In the login form, instead of the normal username text box, you'll see a drop-down menu, as shown in Figure 7-9. Figure 7-9. Drop-down menu of Yahoo! IDsSelect a Yahoo! ID from the list, and the script will automatically set focus to the password field. Or, you can also select Other…to replace the drop-down menu with the regular input box and type your username manually. (This option is useful if you let other people use your computer and they want to check their Yahoo! mail, too.) 7.7.3. Hacking the HackDo you use Google instead of Yahoo!? With some simple modifications, we can do the same thing on the Google login form. Edit the following user script to include your Google IDs, and then save it as google-select.user.js: // ==UserScript== // @name Google User Persitance Thing // @namespace http://www.rhyley.org/gm/ // @description Add a drop-down box with your Google IDs // @include http*://*.google.tld/* // ==/UserScript== // based on code by Jason Rhyley // and included here with his gracious permission // ** Replace this array with your Yahoo IDs ** var gUserIDs = new Array("Put","Your","User","ID","Here"); var login = null; var password = null; function buildLoginThing( ) { if (gUserIDs[0] == 'Put') { alert('You must configure the script before it will \n' + 'work propery. Go to "Manage User Scripts" and\n' + 'click the "Edit" button to configure the script.'); return; } var elmSelect = document.createElement("select"); elmSelect.name = "Email"; elmSelect.style.width = "10em"; elmSelect.addEventListener('change', function( ) { if (this.selectedIndex == this.options.length-1) { window.setTimeout(function( ) { var elmNew = document.createElement("input"); elmNew.type = "text"; elmNew.name = "Email"; elmNew.style.width = "10em"; login.parentNode.replaceChild(elmNew, login); login = elmNew; login.focus( ); }, 0); } else { password.focus( ); } }, true); var arOptions = new Array( ); var i; for (i in gUserIDs) { arOptions[i] = document.createElement("option"); arOptions[i].setAttribute("value",gUserIDs[i]); arOptions[i].text = gUserIDs[i]; elmSelect.appendChild(arOptions[i]); } arOptions[i] = document.createElement("option"); arOptions[i].text = "Other…"; elmSelect.appendChild(arOptions[i]); login.parentNode.replaceChild(elmSelect, login); login = elmSelect; } if (document.forms.length) { for (var k = 0; k < document.forms.length; k++) { var elmForm = document.forms[k]; if (elmForm.action.indexOf('ServiceLogin') != -1) { login = elmForm.elements.namedItem('Email'); password = elmForm.elements.namedItem('Passwd'); break; } } } if (!login) { return; } password.style.width = "10em"; buildLoginThing( ); setTimeout(function( ) { password.focus( ); }, 100); Now, go to http://mail.google.com. (Again, log out if you're already logged in, and then go back to http://mail.google.com to see the login form.) In place of the usual username box, you'll see a drop-down menu of your Google IDs, as shown in Figure 7-10. Figure 7-10. Drop-down menu of Google IDsAs with the Yahoo! script, you can select a Google ID from the menu, or select Other…to type your Google ID manually. |
< Day Day Up > |