Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

How to run a remote JavaScript file from GitHub?

+2
−2

I have a JavaScript file in GitHub which I typically run by copy-pasting all its data into different user script managers (USMs) on different web browsers.

I need to start executing that remote file directly from GitHub instead, because for me it's a problem to maintain two or more versions, each one for each browser (Chrome, FireFox, Edge, etc.), rather, I want to maintain just one version in GitHub and to call it from each browser's USM (each browser might have a different USM with different internal commands, compatibility and caching).

To clarify, I don't mean to sync a script from one USM account to another (as with Greasemonkey synching); I just want to call a script that is being stored on GitHub, instead storing it locally, but only with JavaScript in way totally unified for all USMs.

Update

As Alexei noted in the comment section I can use // @require command but I still seek a JavaScript approach because it will save me a deal with USM caching, syntax compatibility and possible bugs.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

Clarify the actual need (8 comments)

1 answer

+1
−0

As you're using userscripts, I'm assuming this code is supposed to run in a browser. Hence, you could download the scripts and add its contents to the page's DOM (by using a script element).

For that, you can use the Fetch API:

fetch('http://your.script.url', { cache: "no-store" }) // get the script without caching
    .then(resp => resp.text()) // get script's content as text
    .then(function(text) {
        // add script text to DOM
        let script = document.createElement('script');
        script.innerText = text;
        document.body.appendChild(script);

        /************************************************************/
        /* Here you do whatever you need after the script is loaded */
        /************************************************************/
    });

I used the cache: "no-store" option to not use browser's cache, but you can change that if you want. Check all the available options in the documentation.

After loading the script, I get all its contents and add it to the page's DOM by creating a script element and setting its text to be the script's content.


It's important to note that all the code that depends on the script must be inside the callback, because the Fetch API relies on Promises, so if you try to do it outside the callback, it might not work:

fetch('http://your.script.url', { cache: "no-store" })
    .then(resp => resp.text())
    .then(function(text) {
        let script = document.createElement('script');
        script.innerText = text;
        document.body.appendChild(script);

        // code that depends on the script must be here
    });

// code that depends on the script must NOT be here

If you put the code outside the callback, it might run before the script is fully loaded. Only inside the callback your code is guaranteed to work, because there we know for sure that the script was completely loaded.


You could extend that to load lots of scripts, and use Promise.all to make sure all were loaded:

const urls = ['script1.url', 'script2.url', 'script3.url']; // add as many as you want
const scripts = [];
for (const url of urls) {
    scripts.push(fetch(url, { cache: 'no-store' }).then(resp => resp.text()));
}
Promise.all(scripts)
    // this runs only after all scripts are loaded
    .then(function(texts) {
        // add all scripts to page's DOM
        for (const text of texts) {
            let script = document.createElement('script');
            script.innerText = text;
            document.body.appendChild(script);
        }

        // code that depends on the scripts must be here
    });

// code that depends on the scripts must NOT be here
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »