Search code examples
javascripttampermonkey

Tampermonkey, modifying a function programmaticaly fails, but copy-pasting works

It's more of a curiosity than a problem. So I have a function on a website in classes.min.js

function Div(t){
        var e = this.div = document.createElement("div");
        e.style.position = t.position || "absolute", !t.width && 0 != t.width || (e.style.width = t.width + "px"), !t.height && 0 != t.height || (e.style.height = t.height + "px"), t.x || (t.x = 0), t.y || (t.y = 0), this.width = t.width, this.height = t.height, t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.props && (e.props = t.props), !t.top && 0 != t.top || (e.style.top = t.top + "px"), !t.left && 0 != t.left || (e.style.left = t.left + "px"), t.borderRadius && (e.style.borderRadius = t.borderRadius + "px"), t.border && (e.style.border = t.border), t.color && (e.style.backgroundColor = t.color), t.background && (e.style.background = t.background), t.backgroundSize && (e.style.backgroundSize = t.backgroundSize + "px"), t.pointerEvents && (e.style.pointerEvents = t.pointerEvents), !t.opacity && 0 != t.opacity || (e.style.opacity = t.opacity), t.zIndex && (e.style.zIndex = t.zIndex), t.cursor && (e.style.cursor = t.cursor), t.title && (e.title = t.title), t.transition && (e.style.transition = t.transition), t.setOrigin || (t.setOrigin = 0), .5 == t.setOrigin && (t.x = t.x - t.width / 2, t.y = t.y - t.height / 2), 1 == t.setOrigin && (t.x = t.x - t.width, t.y = t.y - t.height), this.x = t.x, this.y = t.y, e.style.marginLeft = t.x + "px", e.style.marginTop = t.y + "px", t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.className && (e.className = t.className), this.setClassName = function(t) {
            e.className = t
        }, this.show = function() {
            e.style.display = "block"
        }, this.hide = function() {
            e.style.display = "none"
        }, this.setX = function(t) {
            x = this.x = t, e.style.marginLeft = x + "px"
        }, this.setY = function(t) {
            y = this.y = t, e.style.marginTop = y + "px"
        }, this.setWidth = function(t) {
            !t && 0 != t || (e.style.width = t + "px", this.width = t)
        }, this.setHeight = function(t) {
            !t && 0 != t || (e.style.height = t + "px", this.height = t)
        }, this.setColor = function(t) {
            e.style.backgroundColor = t
        }, this.setOpacity = function(t) {
            e.style.opacity = t
        }, t.toPreDiv ? t.toPreDiv.prepend(e) : t.toDiv && t.toDiv.appendChild(e), this.remove = function() {
            e.parentNode && e.parentNode.removeChild(e)
        }
    }

I'm trying to add some lines of code to that function with Tampermonkey, so I do

// ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at       document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    oldDiv = Div;
    Div = function(t){
        console.log("added");
        oldDiv(t);
    }
})(window);

I get a bunch of "added" in the console but I also get 200+ errors when main.min.js is trying to access the created divs, and the website doesn't work as inteded.

But when I simply copy paste the function

// ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at        document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    Div = function(t){
        console.log("added");
        var e = this.div = document.createElement("div");
        e.style.position = t.position || "absolute", !t.width && 0 != t.width || (e.style.width = t.width + "px"), !t.height && 0 != t.height || (e.style.height = t.height + "px"), t.x || (t.x = 0), t.y || (t.y = 0), this.width = t.width, this.height = t.height, t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.props && (e.props = t.props), !t.top && 0 != t.top || (e.style.top = t.top + "px"), !t.left && 0 != t.left || (e.style.left = t.left + "px"), t.borderRadius && (e.style.borderRadius = t.borderRadius + "px"), t.border && (e.style.border = t.border), t.color && (e.style.backgroundColor = t.color), t.background && (e.style.background = t.background), t.backgroundSize && (e.style.backgroundSize = t.backgroundSize + "px"), t.pointerEvents && (e.style.pointerEvents = t.pointerEvents), !t.opacity && 0 != t.opacity || (e.style.opacity = t.opacity), t.zIndex && (e.style.zIndex = t.zIndex), t.cursor && (e.style.cursor = t.cursor), t.title && (e.title = t.title), t.transition && (e.style.transition = t.transition), t.setOrigin || (t.setOrigin = 0), .5 == t.setOrigin && (t.x = t.x - t.width / 2, t.y = t.y - t.height / 2), 1 == t.setOrigin && (t.x = t.x - t.width, t.y = t.y - t.height), this.x = t.x, this.y = t.y, e.style.marginLeft = t.x + "px", e.style.marginTop = t.y + "px", t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.className && (e.className = t.className), this.setClassName = function(t) {
            e.className = t
        }, this.show = function() {
            e.style.display = "block"
        }, this.hide = function() {
            e.style.display = "none"
        }, this.setX = function(t) {
            x = this.x = t, e.style.marginLeft = x + "px"
        }, this.setY = function(t) {
            y = this.y = t, e.style.marginTop = y + "px"
        }, this.setWidth = function(t) {
            !t && 0 != t || (e.style.width = t + "px", this.width = t)
        }, this.setHeight = function(t) {
            !t && 0 != t || (e.style.height = t + "px", this.height = t)
        }, this.setColor = function(t) {
            e.style.backgroundColor = t
        }, this.setOpacity = function(t) {
            e.style.opacity = t
        }, t.toPreDiv ? t.toPreDiv.prepend(e) : t.toDiv && t.toDiv.appendChild(e), this.remove = function() {
            e.parentNode && e.parentNode.removeChild(e)
        }
    }
})(window);

It works completely fine. And I just can't understand why, any insight?

Solution

  • Solved it by doing it this way

    // ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at       document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    oldDiv = Div;
    Div = function(t){
        console.log("added");
        oldDiv.apply(this, arguments);
    }
})(window);

    But I still don't understand why this works and the first method doesn't since I've been using it all the time and this is the first time I've encountered this problem.