How do they do this? Modal bookmarklet and instant scraping?

Question

I want a user to open a pop up window from a bookmarklet, but the page loads in like a jquery modal - meaning no ugly browser borders.

See example here, how are Amazon doing this?

http://www.amazon.co.uk/wishlist/get-button

Also, they are obviously scraping the page to get the info but the page load is almost instant, are they caching every page a user reads somehow? How else would they achieve this? I've tried simple-html-dom but it is far from instant

This is the JS Amazon use:

javascript:(function(){var w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBookenGB',u='https://www.amazon.co.uk/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?loc='+e(l)+'&b='+n),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof s!=o?l.href=u+'?u='+e(l)+'&t='+e(d.title):g()}())

Beautified and manually deobfuscated:

javascript:(function() {
    var w = window,
        l = w.location,
        d = w.document,
        s = d.createElement('script'),
        e = encodeURIComponent,
        o = 'object',
        n = 'AUWLBookenGB',
        u = 'https://www.amazon.co.uk/wishlist/add',
        r = 'readyState',
        T = setTimeout,
        a = 'setAttribute',
        g = function() {
            if (d[r] && d[r] != 'complete') {
                T(g, 200);
            } else if(!w[n]) {
                s[a]('charset', 'UTF-8');
                s[a]('src', u + '.js?loc=' + e(l) + '&b=' + n);
                d.body.appendChild(s);
                f();
            } else {
                f();
            }
        },
        f = function() {
            if (!w[n]) {
                T(f, 200);
            } else {
                w[n].showPopover();
            }
    };
    if (typeof s != o) {
        l.href = u + '?u=' + e(l) + '&t=' + e(d.title);
    } else {
        g();
    }
}())

Answer 1

I have slightly de-obfuscated the code, see the question’s post.

The script requests a script from amazon's website, with the following URL:

https://www.amazon.co.uk/wishlist/add.js?loc=<CURRENT URL>&b=AUWLBookenGB

Inside the response's code (add.js example), a <table> element is dynamically created and populated, then inserted in the page.

The "magic" happens at the server's side, where the script is generated. All necessary data is served with the injected JS file.

Answer 2

That javascript code creates a <script> tag to load up the js file (needed to create a wishlist popup) into the page you are on.

http://www.amazon.co.uk/wishlist/add.js?loc=your-page-url&b=AUWLBookenGB:1703

The above url does not take much time to load the js file into the page which eventually creates a popup. Finally it hits the amazon server to load the popup dynamically by visiting the following url.

https://www.amazon.co.uk/wishlist/add?u=your-page-url&t=your-page-title

The secret is how fast can you load the content needed to generate a popup so it should load instantly.

Answer 3

This code is a bit difficult to read but this is basically what it does:

• create a <script> in the current document (the page you are currently viewing) and set its source to https://www.amazon.co.uk/wishlist/add.js

• the script executes and actually create a AUWLBookenGB object to the global scope

• then the method showPopover(); is executed with w[n].showPopover(); which actually correspond to `window.AUWLBookenGB.showPopover();

The method showPopover() is responsible for showing the popup.