CODEWITHSUNDEEP
javascriptgreasemonkey
Joey
Joey

Reputation: 10965

Intercept and alter a site's javascript using greasemonkey

Suppose there is a site that includes an external .js file in an html script tag like so:

<script src="somescript.js">

I want greasemonkey to intercept each of such scripts, and alter some of the values in them before they execute. For example, I want to change all occurrences of the value "400" to "300" within them, then continue to load the page as if the scripts used those values instead of the original ones. Currently I'm using the following code in greasemonkey:

function replaceTargetJavascript (scriptNode) {
    var scriptSrc   = scriptNode.textContent;
    scriptSrc       = scriptSrc.replace (
        /'400'/,
        "'300'"
    );

    addJS_Node (scriptSrc);
}

document.addEventListener("beforescriptexecute", function(e) {

    checkForBadJavascripts ( [
        [false, /'400'/, replaceTargetJavascript]
    ] );
}, true);

Which according to my sources is the right way to do it, but it is not working. Can anyone please help me figure this out?

Upvotes: 15

Views: 9849

Answers (2)

Alowaniak
Alowaniak

Reputation: 600

Old question but I needed to do this recently and the accepted answer uses the non-standard-feature beforescriptexecute.

It's basically the same as the accepted answer but using the MutationObserver as comments alluded to, also see this answer for a duplicate question.

new MutationObserver(async (mutations, observer) => {
    let oldScript = mutations
        .flatMap(e => [...e.addedNodes])
        .filter(e => e.tagName == 'SCRIPT')
        .find(e => e.src.match(/old-script.js/))

    if (oldScript) {
        observer.disconnect()
        oldScript.remove()

        let text = await fetch(oldScript.src).then(e => e.text())
            .then(e => e.replace(/hijack-part/g, "profit"))

        let newScript = document.createElement('script')
        newScript.type = 'module' // or text/javascript depending on what you hijack
        newScript.textContent = text
        document.querySelector('head').appendChild(newScript)
    }
}).observe(document, {
    childList: true,
    subtree: true,
})

I'm not 100% sure in what order things happen regarding mutations and script loading/executing though. So I don't know if there are corner cases where the script has already been executed before the observer gets mutation. AFAICT the MutationObserver is only an observer and can't strictly prevent nodes being added, just remove them immediately.

In my case it works though.

Upvotes: 3

Jack Culhane
Jack Culhane

Reputation: 781

Old question, but I needed to do this recently. Here's how I did it using GreaseMonkey.

You add the beforescriptexecute listener, and wait for your target script to be loaded, checking the src tag to identify the correct script.

Then you stop that script from loading and get the script source yourself using GM_xmlhttpRequest.

Then you are free to modify the script as you please and insert it back into the DOM.

// ==UserScript==
// @name        Test
// @namespace   Test
// @description TEST
// @include     http://the.website.com/*
// @version     1
// @grant       GM_xmlhttpRequest
// @run-at      document-start
// ==/UserScript==

function addScript(text) {
    text = text.replace(/replaceThis();/g, "");
    var newScript = document.createElement('script');
    newScript.type = "text/javascript";
    newScript.textContent = text;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(newScript);
}

window.addEventListener('beforescriptexecute', function(e) {
    src = e.target.src;
    if (src.search(/script_to_modify\.js/) != -1) {
        e.preventDefault();
        e.stopPropagation();        
        GM_xmlhttpRequest({
            method: "GET",
            url: e.target.src,
            onload: function(response) {
                addScript(response.responseText);
            }
        });
    }
});

Upvotes: 23

Related Questions