How to overwrite a function using a userscript?

Question

I want to change parts of the webpage display, is it possible to overwrite a function with a userscript?

Below is the function I would like overwritten (also found Here):

function StartDrawing() {
    if ((typeof (systemsJSON) != "undefined") && (systemsJSON != null)) {
        var stellarSystemsLength = systemsJSON.length;
        $('#mapDiv').empty();
        if (stellarSystemsLength > 0) {
            InitializeRaphael();

            var i = 0;
            for (i = 0; i < stellarSystemsLength; i++){
                var stellarSystem = systemsJSON[i];
                DrawSystem(stellarSystem)
            }
        }
    }
}

This would allow me to run my own drawing algorithms.

How do I do this with a userscript in chromium (or Firefox)?

score 11 · Accepted Answer · edited May 23 '17 at 12:26

See "Accessing Variables (and Functions) from Greasemonkey to Page & vice versa.

Userscripts are separated from the target page, so you can't just overwrite a function or variable without understanding the context...

IF the function is global (looks like it probably is in this case), you can inject your new function definition:

function StartDrawing () {
    // WHATEVER YOU WANT FOR THE NEW CODE GOES HERE.
}

addJS_Node (StartDrawing);

function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

This works in almost every browser that supports userscripts.

You may need to delay the load in some cases, by firing on the window load event and/or checking to see if the function already exists.

Depending on your browser, you may have additional options (see the linked Q&A, above):

In Firefox+Greasemonkey, you can use @grant none mode or unsafeWindow.
In Chrome+Tampermonkey, you can usually use unsafeWindow. @grant none mode probably works too, but I haven't tested it myself.

If the function is NOT global:

Then in Firefox you must overwrite the JS source as it comes in. See "Stop execution of javascript function (client side) or tweak it".

In Chrome you're mostly out of luck (last verified six-ish months ago).

score 4 · Answer 2 · edited Jan 22 '14 at 01:05

4

javascript allow redefine the function if function existed. if redefine, the function will be overwritten without any warning.

if you want to old function work as well, you can do the following way.

var _oldStartDrawing =StartDrawing;
function StartDrawing() {
     _oldStartDrawing();//if you need previous function
     //extend code here;
}

edited Jan 22 '14 at 01:05

epascarello

204,599
20
195
236

answered Jan 22 '14 at 00:41

caoglish

1,343
3
19
29

You have a typo that is going to cause major issues. – Marty Jan 22 '14 at 00:44
@epascarello You're right, I always forget about that mechanic. – Marty Jan 22 '14 at 01:40
This seems very simple, unlike the accepted answer. Is there any caveat? – M. Volf Jul 22 '20 at 16:46
@M.Volf If the function used in the original page script and it call by event later, the original page script write call the new overwritten script. In theory, it is possible to affect the other userscripts if call the function by event. – caoglish Jul 27 '20 at 02:22

How to overwrite a function using a userscript?

2 Answers2

If the function is NOT global:

Linked