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

Adding a Material UI Tooltip to the header name of a Material UI Datagrid - a step-by-step guide!

How can we add up the sum with just one click and then display the

Tips for transferring data from a service to a method within a component

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Integration of Angular.js functionalities within a Node.js application

Tips for preserving updates following modifications in Angular 5/6?

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

How can you prevent JQuery AJAX from automatically redirecting after a successful form submission?

Utilize the onClick event to access a method from a parent component in React

Connect a nearby dependency to your project if it has the same name as an npm repository

Steps to implement jQuery after executing the command "npm install jquery"

Create a dynamic editing experience using PHP and AJAX, allowing users to make

How can I extract data from [Object object] in Node.js?

Adjust the content of an iframe based on the size of the screen

React SlideMenu will not close when a link is clicked

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Guide: Implementing Paginated Search with Azure Search in PHP

Creating a nested function and utilizing the return statement in JavaScript

Transmit information from the frontend to the backend using JavaScript and the Express framework

Error with JSON parsing in JavaScript when processing large numbers