Analyzing the Amazon Universal WishList Bookmarklet
Amazon added a nifty Universal Wishlist function to their site back in August but I just discovered it today (thanks Yuriy!). Essentially it is a personalized bookmarklet/favelet that injects code into any page, letting you add any and everything to your Amazon wishlist.
The code for the bookmarklet is this:
javascript:(function(){var%20w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,x='undefined',u='http://www.amazon.com/gp/wishlist/add';if(typeof%20s!='object')l.href=u+'?u='+e(l)+'&t='+e(d.title);function%20g(){if(d.readyState&&d.readyState!='complete'){setTimeout(g,200);}else{if(typeof%20AUWLBook==x)s.setAttribute('src',u+'.js?loc='+e(l)),d.body.appendChild(s);function%20f(){(typeof%20AUWLBook==x)?setTimeout(f,200):AUWLBook.showPopover();}f();}}g();}())
Not very readable – so I decided to expand it. I added linebreaks, and in some cases vars, {}s and in one case changed a tertiary conditional to a regular if..else statement:
//javascript: (function() { //order of execution: //1. Initialization //2. Script check //3. Load remote script //4. Execute remote script //***Initialization *** //create short aliases for common objects var w = window, l = w.location, d = w.document; //create a script element and give it a short alias var s = d.createElement('script'); //create some more short aliases... var e = encodeURIComponent, x = 'undefined'; var u = 'http://www.amazon.com/gp/wishlist/add'; //***Script check *** //if the script element was not properly created... if (typeof s != 'object') { //..navigate to the Wishlist add page, passing along the current page url and title l.href = u + '?u=' + e(l) + '&t=' + e(d.title); //effectively ends the script } //...else (script successfully created) //*** Load remote script *** //create a function that we can call recursively until the document is fully loaded function g() { //if the document is not fully loaded... if (d.readyState && d.readyState != 'complete') { //.. wait 200 milliseconds and then try again setTimeout(g, 200); } else { //... the document IS fully loaded //if the Amazon Universal Wishlist object is undefined... if (typeof AUWLBook == x) { //set the source of the script element to http://www.amazon.com/gp/wishlist/add.js //This is a pretty complex and large JavaScript object, not discussed here //Essentially it displays a floating div in the top left corner of the page //in which the user can enter product details and select from the pictures on the //current page. //AUWLBook is personalized for each user, setting Wishlist titles and regystryIds //If the user is signed out, it will navigate to the Amazon sign in page, and then //to the wishlist //If the user is signed in, it will display a floating confirmation div with options //of navigating to the list or "continue shopping". //I don't BELIEVE the loc query parameter actually alters the generated JavaScript, //it must be used for other purposes s.setAttribute('src', u + '.js?loc=' + e(l)); //append the script d.body.appendChild(s); } //***Execute remote script *** //create a function that we can call recursively until the AUWLBook object is fully loaded function f() { //if the AUWLBook object is not loaded yet, wait 200 ms and try again if (typeof AUWLBook == x) { setTimeout(f, 200); } else { //when loaded display the pop-over div - see above AUWLBook.showPopover(); } } //call the f function f(); } } //call the g function g(); } ())See http://etherpad.com/10gdKmen5u for the full js with proper highlighting.
Labels: ajax, experiment, howto, javascript, programming, random