Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to integrate third-party JavaScript libraries in userscripts

For this userscript I'm writing, I need to use a third-party JavaScript library which has 3 JavaScript files. Since @require doesn't work on Chrome, how can I add multiple external JavaScript libraries to a userscript? I'm considering all the possibilities before choosing one.

I know you can add jQuery using this method. I have personally used that. Is it possible to add other libraries using this work-around as well?

like image 678
Isuru Avatar asked Sep 05 '25 01:09

Isuru


1 Answers

Try adding following function in your userscript,

/**
 * Dynamically loading javascript files.
 *
 * @param filename url of the file
 * @param callback callback function, called when file is downloaded and ready
 */
function loadjscssfile(filename, callback) {
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    if (fileref.readyState) {
        fileref.onreadystatechange = function() { /*IE*/
            if (fileref.readyState == "loaded" || fileref.readyState == "complete") {
                fileref.onreadystatechange = null;
                callback();
            }
        }
    } else {
        fileref.onload = function() {  /*Other browsers*/
            callback();
        }
    }

    // Try to find the head, otherwise default to the documentElement
    if (typeof fileref != "undefined")
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(fileref)
}

As the files are loaded asynchronously, and order of the loading of files is not guaranteed, than for multiple external files, call this function in a chined function e.g.

loadjscssfile("http://code.jquery.com/jquery-1.6.3.min.js", function() {
    loadjscssfile("http://www.abc.org./script/otherFile.js", function() {
       // call your function that depends on the external libriries here.
     });
});

Chain as many exeternal files as you need, the order of loading files will be properly preserved. Hope this helps, all best

like image 73
Master Slave Avatar answered Sep 06 '25 22:09

Master Slave