ARTICLE AD BOX
I’m writing a Tampermonkey userscript for "https://wplace.live".
The site renders a world map on an HTML <canvas>. I want to overlay an image that stays aligned with the map while the user pans and zooms.
The problem is that the <canvas> element itself does not move in the DOM when the user pans the map, so I cannot determine the current map position directly from DOM changes.
While debugging in DevTools, I found an internal function inside one of the site’s bundled JavaScript files that places a marker on the map. That marker correctly stays attached to map coordinates during pan/zoom.
When I set a breakpoint inside that function (inside class zv, method place), I can access some internal variables. From the console at that breakpoint, I can expose a helper to window:
window.PlaceMarker = (x, y) => { H.setLngLat({ lat: y / 10000, lng: x / 10000 }).addTo(T); };After doing this once, I can call PlaceMarker(0, 0) from my userscript and it works correctly.
However, this currently requires the user to:
Open DevTools
Set a breakpoint
Wait for execution to pause
Manually define the function in the console
I want to avoid this entirely.
Question:
From a Tampermonkey userscript, is it possible to programmatically access or hook into internal variables/functions of a site’s bundled JavaScript (that are not exposed on window) without using manual breakpoints?
I’m looking for a general approach (e.g., script interception, monkey-patching, overriding constructors, etc.) that works in this situation.
In the source file of interest, I noticed this type of line this.markers.set(k, theVariableINeed) so from here I should be able to achieve what I need by overriding the set function. Even though this might work, it's a very specific solution and I would still like to know some more general approach to this problem.
