CODEWITHSUNDEEP
javascriptuserscripts
Isuru
Isuru

Reputation: 31283

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?

Upvotes: 4

Views: 2420

Answers (2)

Isuru
Isuru

Reputation: 31283

function requireFiles(jsLibs, callback) 
{
    //array to hold the external libabry paths
    var jsLibs = new Array();
    jsLibs[0] = "http://code.jquery.com/jquery-1.7.1.min.js"
    jsLibs[1] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/zip.js"
    jsLibs[2] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/deflate.js"
    jsLibs[3] = "https://raw.github.com/gildas-lormeau/zip.js/master/WebContent/inflate.js"

    var index = 0;
    var requireNext = function() 
    {
        var script = document.createElement("script");
        if (index < jsLibs.length) 
        {
            script.addEventListener("load", requireNext, false);
            script.setAttribute("src", jsLibs[index++]);
        }
        else 
        {
            script.textContent = "(" + callback.toString() + ")()";
        }
        document.body.appendChild(script);
    }
    requireNext();
}


function otherCode()
{
    //rest of the script
}

requireFiles(otherCode);

Upvotes: 0

Master Slave
Master Slave

Reputation: 28519

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

Upvotes: 4

Related Questions