During my daily development, I encounter a request to add code snippets before and after each function call for all the JavaScript files. I have figure out three ways to do this

1. Overwrite the Function.prototype.call, this will only effect the directly call the call method from a function object such as foo.call(…). The call method will not triggered with directly call function with brace, such as foo(…)

disadvantage: not cover all the function even normal function calls

2. Use custom or use some AOP JS library to hook specify function. This is also could be extended by use a recursive method to hook all the function object in a give scope such as window in browser.

such as hooker lib, https://github.com/rcorp/hooker

jquery AOP plugin

advantage: easy to use

disadvantage: not cover all of the functions in the JS files, such as anonymous functions are not included.

3. Use some script to parse all the JS files and inject codes before and after all the functions.

This article is mainly to talk about the tool which I created for automatic inject the codes before and after the function calls.

It is called hookjs, which is written in python. It could be checkout from my github repo(https://github.com/shangerxin/PersontalTools). The binary version could be download from the bin folder.

$ hookjs -h

usage: hookjs.exe [-h] [-p PATH] [-s START] [-e END]                   [-f [BLACK_FILES [BLACK_FILES ...]]]                   [-d [BLACK_DIRS [BLACK_DIRS ...]]]

A command line JavaScript hook tool for inject start, end codes into every JavaScript functions. Currently only support uncompressed EMCScipt 5. Any errors will be output into the error.log file.

optional arguments:

-h, –help   show this help message and exit

-p PATH, –path PATH  The path to the JavaScript file or directory

-s START, –start START  The start code snippet which will be injected at the                         begin of each function

-e END, –end END     The end code snippet which will be injected at the end                         of each function

-f [BLACK_FILES [BLACK_FILES ...]], –black-files [BLACK_FILES [BLACK_FILES ...]]                         Use regex expression to define the black files list, the files will not be hooked

-d [BLACK_DIRS [BLACK_DIRS ...]], –black-dirs [BLACK_DIRS [BLACK_DIRS ...]]                         Use regex expression to define the black dirs list, the directory and sub directory will not be searched

Created by Edwin, Shang(Shang, Erxin), License under GNU GPLv3. Version 1.0.0

Example:

Inject codes to a JS files, the original JS content

Code block

x = findMax(1, 123, 500, 115, 44, 88);
 
(function(){
})();
 
function findMax() {
     var i;
    var max = -Infinity;
     for (i = 0; i < arguments.length; i++) {
         if (arguments[i] > max) {
             max = arguments[i];
         }
     }
     return max;
}

run command

Code block

hookjs.exe -p e:\demo.js -s console.log("start"); -e console.log("end");

Code block

x = findMax(1, 123, 500, 115, 44, 88);
 
(function(){console.log(start);
console.log(end);})();
 
function findMax() {console.log(start);
     var i;
    var max = -Infinity;
     for (i = 0; i < arguments.length; i++) {
         if (arguments[i] > max) {
             max = arguments[i];
         }
     }
     console.log(end);return max;
console.log(end);}

Limitations:

The tool is not works with compressed JS file such as jquery-min etc. To add hook for these kinds of JS files, it required to format the JS first then use the tool the inject the JS codes.

Current it is not design for support arrow function syntax which is added in EMCAScript 6

Have fun.