How do I modify/extend a javascript function in place by an inject script?

Question

Lets say this function...

function foo(param){
// original works
}

is already in-place in an html document.

I have a bookmarklet that injects an external script to the document. From that script, I want to modify the behavior of foo() function into this...

function foo(param){
// original works
bar(param);
}

bar() is a new function in the injected script. I have no problem duplicating foo in the injected script.

How do I do this?

Mike Robinson · Accepted Answer · 2011-01-27 02:31:31Z

2

Everything in javascript can be an object, including functions. With this in mind, you can create a duplicate of the old function, then override the new one while referencing the duplicate:

function foo(param){
// original works
}

var old_foo = foo;

function foo(param) {
 old_foo(param);
 bar(param);
}

answered Jan 27, 2011 at 2:31

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JCOC611 Over a year ago

I don't know why, I was testing something similar to this and oops exception: RangeError: Maximum call stack size exceeded when I ran the new foo. PS: +1.

Mike Robinson Over a year ago

@JCOC611 Was it a ... <puts on sunglasses> ...StackOverflow? YEEEEEaaaaaah!

david Over a year ago

would it be more correct to store the return value of old_foo() and return that from the new foo()?, like this: function foo(param){var ret = old_foo(param);bar(param);return ret;}

Mike Robinson Over a year ago

@david You are correct, although I will keep my answer simple as not to confuse.

Collectives™ on Stack Overflow

How do I modify/extend a javascript function in place by an inject script?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related