Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to run a remote JavaScript file from GitHub?
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.
2 answers
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
0 comment threads
const script = document.createElement('script');
script.src = `your.script.url/?_bustcache=${Date.now()}`;
script.async = true;
script.onload = doSomething;
document.head.appendChild(script);
async function doSomething() {
// do stuff once its loaded
}
1 comment thread