How do they do this? Modal bookmarklet and instant scraping?
-
13-11-2019 - |
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();
}
}())
Solution
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.
OTHER TIPS
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.
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.jsthe script executes and actually create a
AUWLBookenGB
object to the global scopethen the method
showPopover();
is executed withw[n].showPopover();
which actually correspond to `window.AUWLBookenGB.showPopover();
The method showPopover()
is responsible for showing the popup.