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.