The userscript is designed to function exclusively on pages originating from the backend, rather than on the frontend in a single-page application

Question

The userscript is designed to function exclusively on pages originating from the backend, rather than on the frontend in a single-page application

I have a userscript that I use with Greasemonkey/Tampermonkey.

It's set to run on facebook.com, where some pages are served from the backend during bootstrapping and others are loaded on the fly in the front-end using HRO, similar to how a Single Page Application (SPA) functions.

// ==UserScript==
// @name        facebook
// @namespace   nms
// @include     http://*.facebook.com/*
// @include     https://*.facebook.com/*
// @version     1
// @grant       none
// ==/UserScript==

setTimeout( () => {
    // generalStuff:
        document.querySelectorAll(' #left_nav_section_nodes, .fbChatSidebar ').forEach( (e)=> {
            e.style.visibility = "hidden";
        });

}, 1000);

When I manually run this script in the console on SPA-like webpages, it works without any issues. However, when I try to execute it through Greasemonkey or Tampermonkey, it doesn't work on these specific types of webpages.

Is there a way to modify the script so that it functions correctly on SPA-style webpages as well?

javascript ajax console single-page-application userscripts

Answer 1

Answer №1

When traditional methods like setTimeout, setInterval, and event delegation fail to work on their own, there is a workaround available. By pushing a state that includes these methods into memory, we can then replace the current state with it, effectively causing a change in the webpage's DOM content.

Here is a piece of code used to swap data loaded via AJAX instead of directly from PHP:

let utilityFunc = ()=> {
    var run = (url)=> {
       // insert your code here
    };

    var pS = window.history.pushState;
    var rS = window.history.replaceState;

    window.history.pushState = function(a, b, url) {
        run(url);
        pS.apply(this, arguments);
    };

    window.history.replaceState = function(a, b, url) {
        run(url);
        rS.apply(this, arguments);
    };

utilityFunc();

This information was gathered while reading here.

Answer 2

When traditional methods like setTimeout, setInterval, and event delegation fail to work on their own, there is a workaround available. By pushing a state that includes these methods into memory, we can then replace the current state with it, effectively causing a change in the webpage's DOM content.

Here is a piece of code used to swap data loaded via AJAX instead of directly from PHP:

let utilityFunc = ()=> {
    var run = (url)=> {
       // insert your code here
    };

    var pS = window.history.pushState;
    var rS = window.history.replaceState;

    window.history.pushState = function(a, b, url) {
        run(url);
        pS.apply(this, arguments);
    };

    window.history.replaceState = function(a, b, url) {
        run(url);
        rS.apply(this, arguments);
    };

utilityFunc();

This information was gathered while reading here.

Answer 3

Answer №2

Another scenario where I had to tackle a similar issue involved utilizing the MutationObserver and inspecting the node.baseURI of each node within the mutation.addedNodes.

(async function() {
    'use strict';
    const targetSelector = '.quiz--answered';
    const observer = new MutationObserver(mutations => {
        if (!mutations.some(mutation => Array.from(mutation.addedNodes).some(node => node.baseURI.includes('/quiz/')))) {
            return;
        }
        const targetElement = document.querySelector(targetSelector);
        if (targetElement) {
            // implement logic with targetElement
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

Answer 4

Another scenario where I had to tackle a similar issue involved utilizing the MutationObserver and inspecting the node.baseURI of each node within the mutation.addedNodes.

(async function() {
    'use strict';
    const targetSelector = '.quiz--answered';
    const observer = new MutationObserver(mutations => {
        if (!mutations.some(mutation => Array.from(mutation.addedNodes).some(node => node.baseURI.includes('/quiz/')))) {
            return;
        }
        const targetElement = document.querySelector(targetSelector);
        if (targetElement) {
            // implement logic with targetElement
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

Answer 5

Answer №3

Encountering this issue multiple times led me to create a custom solution. I developed a simple library that enables me to execute scripts on URL changes, specify URLs using wildcards, and wait for specific elements if needed. This library is known as spa-runner.

import { run } from "@banjoanton/spa-runner";


const handler = () => {
    console.log("hello world!");
}

const config = {
    urls: ["http://*.facebook.com/*"],
    runAtStart: true,
};

const unsubscribe = run(handler, config);

Answer 6

Encountering this issue multiple times led me to create a custom solution. I developed a simple library that enables me to execute scripts on URL changes, specify URLs using wildcards, and wait for specific elements if needed. This library is known as spa-runner.

import { run } from "@banjoanton/spa-runner";


const handler = () => {
    console.log("hello world!");
}

const config = {
    urls: ["http://*.facebook.com/*"],
    runAtStart: true,
};

const unsubscribe = run(handler, config);

Answer 7

Answer №4

After going through this specific documentation, it is clear that this code is designed to function effectively for single page applications when changing the location:

// ==UserScript==
...
// @match        https://subdomain.domain.tld/*
// @match        http://subdomain.domain.tld/*
// @grant        window.onurlchange
// ==/UserScript==

(function() {
    'use strict';
    if (window.onurlchange === null) {
        window.addEventListener('urlchange', (info) => {
            if (Object.values(info)[0].includes("/path/to/certainlocation")) {
                // your code here
            }

        });
    }
})();

It's important to note that this may not be effective if you directly visit the certain location, but adjustments can be made to address that issue. Alternatively, a separate userscript could be created that specifically targets that particular location, like so:

// @match       https://subdomain.domain.tld/path/to/certainlocation
// @match       http://subdomain.domain.tld/path/to/certainlocation

Answer 8

After going through this specific documentation, it is clear that this code is designed to function effectively for single page applications when changing the location:

// ==UserScript==
...
// @match        https://subdomain.domain.tld/*
// @match        http://subdomain.domain.tld/*
// @grant        window.onurlchange
// ==/UserScript==

(function() {
    'use strict';
    if (window.onurlchange === null) {
        window.addEventListener('urlchange', (info) => {
            if (Object.values(info)[0].includes("/path/to/certainlocation")) {
                // your code here
            }

        });
    }
})();

It's important to note that this may not be effective if you directly visit the certain location, but adjustments can be made to address that issue. Alternatively, a separate userscript could be created that specifically targets that particular location, like so:

// @match       https://subdomain.domain.tld/path/to/certainlocation
// @match       http://subdomain.domain.tld/path/to/certainlocation

The userscript is designed to function exclusively on pages originating from the backend, rather than on the frontend in a single-page application

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

AJAX is malfunctioning

How can I implement user account functionality with only JavaScript in an Angular frontend and Node.js/Express server?

Babel continues to encounter issues with async/await syntax, even with all the necessary presets and plugins installed

Retrieve the query result using MYSQLI in an Ajax request and display it in an HTML document

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Guide on linking JavaScript files in Node.js

Exploring the process of dynamically inserting choices into an array of HTML dropdown menus using a combination of Php, AJAX, and jQuery

Is employing absolute paths in our confidential Node dependencies a good idea?

Why does Vue continuously insert undefined values when adding non-consecutive indexes to an array?

Troubleshooting Angular Reactive Forms: Issue with Binding Dynamic Select Dropdown Value

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

The HTML table is not fully filled with data from the XML file

Firefox triggers drag events while passing over a div scrollbar

Leverage the hidden glitch lurking within Vue

Finding the distance between two coordinates using Mapbox is easy once you understand how to utilize

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

Using Vue's v-bind directive with a single set of curly braces expression

Issues with lazy loading in swiper.js when trying to display multiple images per slide

Steps for dynamically expanding a textarea in Selenium WebDriver when the element path is constantly changing

Is the jQuery AJAX call using POST method being retrieved as $_GET?