Need to hook into a javascript function call, any way to do this?

Question

I'm trying to hook into a function that loads Facebook's news feed:

UIIntentionalStream.instance && UIIntentionalStream.instance.loadOlderPosts();

on Facebook.com.

Is there a way for me to do this with my own JavaScript? Basically, I need to have some sort of callback - when that function is called, I'd like my own function to be called.

score 37 · Answer 1 · edited Nov 07 '18 at 05:40

37

A more complete method will be:

var old = UIIntentionalStream.instance.loadOlderPosts;
UIIntentionalStream.instance.loadOlderPosts = function(arguments) {
    // hook before call
    var ret = old.apply(this, arguments);
    // hook after call
    return ret;
};

This makes sure that if loadOlderPosts is expecting any parameters or using this, it will get the correct version of them as well as if the caller expects any return value it will get it

edited Nov 07 '18 at 05:40

Haibrayn González

171
12

answered May 30 '12 at 11:40

yossi eilaty

371
1
2
2

The `arguments` parameter to your function isn't actually doing anything here. `arguments` is a keyword in Javascript. It's available inside the function regardless of the parameters, so your function should simply be `function()`. – Mud Sep 02 '22 at 19:32

score 16 · Accepted Answer · answered Apr 23 '12 at 00:10

16

Try something like this:

var old = UIIntentionalStream.instance.loadOlderPosts;
UIIntentionalStream.instance.loadOlderPosts = function() {
    // hook before call
    old();
    // hook after call
};

Just hook in wherever you want, before or after the original function's call.

answered Apr 23 '12 at 00:10

Niet the Dark Absol

320,036
81
464
592

maybe suggest wrapping the function instead of monkeypatching it – Alexander Mills Dec 19 '22 at 08:39

score 8 · Answer 3 · answered Jul 24 '15 at 20:00

Expanding on the previous posts: I have created a function that you can call to perform this "hooking" action.

hookFunction(UIIntentionalStream.instance, 'loadOlderPosts', function(){
    /* This anonymous function gets called after UIIntentionalStream.instance.loadOlderPosts() has finished */
    doMyCustomStuff();
});



// Define this function so you can reuse it later and keep your overrides "cleaner"
function hookFunction(object, functionName, callback) {
    (function(originalFunction) {
        object[functionName] = function () {
            var returnValue = originalFunction.apply(this, arguments);

            callback.apply(this, [returnValue, originalFunction, arguments]);

            return returnValue;
        };
    }(object[functionName]));
}

Bonus: You should also wrap this all a closure, for good measure.

score 5 · Answer 4 · answered Jun 11 '20 at 21:23

Similar to Eric's answer above. When using ES6, this function works for both async and sync functions:

export function createHook(obj, targetFunction, hookFunction) {
    let temp = obj[targetFunction]
    obj[targetFunction] = function (...args) {
        let ret = temp.apply(this, args)
        if (ret && typeof ret.then === 'function') {
            return ret.then((value)=>{hookFunction([value, args]); return value;})
        } else {
            hookFunction([ret, args])
            return ret
        }
    }
}

Need to hook into a javascript function call, any way to do this?

4 Answers4

Linked