How is this JavaScript object created for this bookmarklet?

Question

I am trying to reverse engineer a bookmarklet that uses CasperJS.

It creates an object called __utils__ that I can execute console commands with.

The link to the bookmarklet is here:-

http://casperjs.org/api.html#bookmarklet

Which references this JavaScript file:-

https://raw.github.com/n1k0/casperjs/master/modules/clientutils.js

I have searched through the whole source code and I cannot find a reference to how this object is created.

Any pointers would be appreciated.

Answer 1

Look at the source of api.html. After Just drag this link look at the JS in the href attribute. Near the end it contains:

window.__utils__=new%20window.clientUtils();

Answer 2

The bookmarklet simply runs a small snippet of JavaScript code that appends a link to the clientutils.js to the document's end. After that, it will run an anonymous function every 50 milliseconds that checks if the script has loaded (and has made the ClientUtils function available), and if it has, it stops running the function and creates window.__utils__, thus making it available in the console. Here's the actual bookmarklet code in a more readable format. It should be pretty straightforward to understand:

(function () {
  void(function () {
    if (!document.getElementById('CasperUtils')) {
      var CasperUtils = document.createElement('script');
      CasperUtils.id = 'CasperUtils';
      CasperUtils.src = 'https://raw.github.com/n1k0/casperjs/master/modules/clientutils.js';
      document.documentElement.appendChild(CasperUtils);
      var interval = setInterval(function () {
        if (typeof ClientUtils === 'function') {
          window.__utils__ = new window.ClientUtils();
          clearInterval(interval);
        }
      }, 50);
    }
  }());
})();