ScriptInjector Chrome snippet - WIP

scriptInjector.js

/*
 * ScriptInjector-snippet
 * Copyright (c) 2015 Joris van de Donk
 * Snippet that can be used to inject JavaScript and CSS into a page.
 * Uses cdnjs.com's CDN and APIs.
 * Licensed under the MIT license.
 * Very WIP as of yet ;)
 */

(function() {
    var injectCount = 0;

    function reqListener(xhrdata) {
        var response = JSON.parse(xhrdata);
        var libs = response.results;
        var SI = {};

        var red = "background: #fcc";
        var green = "background: #cfc";
        var blue = "background: #ccf";
        var yellow = "background: #ffc";

        SI.libs = libs;

        SI.search = function(search_str) {
            search_str = search_str.toLowerCase();
            var results = SI.libs.filter(function(result) {
                return (result.name.toLowerCase().indexOf(search_str) > -1);
            });
            if (results.length > 0) {
                var table = results.reduce(function(memo, lib) {
                    memo[lib.name] = lib;
                    return memo;
                }, {});
                console.table(table, ["description"]);
            } else {
                console.log("%cNo libraries found for query '%c" + search_str + "%c'!", blue, green, blue);
            }
        };

        SI.getURL = function(libname) {
            var results = SI.searchInHaystack(SI.libs, libname);
            if (results.length === 1) {
                return results[0].latest;
            } else if (results.length === 0) {
                console.log("%cNo libraries found named '%c" + search_str + "%c'!", blue, green, blue);
                return undefined;
            } else {
                console.log("%cMore than 1 library found for name '%c" + search_str + "%c'!", blue, green, blue);
                return undefined;
            }
        }

        SI.getAssets = function(libname, callback) {
            ezXHR("http://api.cdnjs.com/libraries?search=" + libname + "&fields=version,description,assets", function(xhrdata) {
                var libs = JSON.parse(xhrdata).results;
                libs = SI.searchInHaystack(libs, libname);
                callback(libs);
            });
        }

        SI.showAssets = function(libname) {
            SI.getAssets(libname, function(libs) {
                // TODO: length check on the libs and assets.
                console.log(libs);
                var tableToRender = libs[0].assets[0].files.map(function(file) {
                    return "http://cdnjs.cloudflare.com/ajax/libs/" + libname + "/" + libs[0].assets[0].version + "/" + file.name;
                })
                renderHTMLTable(tableToRender, function(row) {
                    return function() {
                        SI.injectURL(row);
                    }
                });
            })
        }

        SI.searchInHaystack = function(haystack, libname) {
            var search_str = libname.toLowerCase();
            var results = haystack.filter(function(result) {
                return (result.name.toLowerCase() === search_str);
            });
            return results;
        }

        SI.inject = function(libname, callback) {
            if (callback === undefined) {
                callback = function() {
                    console.log("%cScript '%c" + libname + "%c' loaded!", blue, yellow, blue);
                };
            }
            SI.injectURL(SI.getURL(libname), libname, callback);
        }

        SI.injectURL = function(url, scriptname, callback) {
            if (scriptname === undefined) {
                scriptname = "SCRIPT" + injectCount;
                injectCount = injectCount + 1;
            }
            if (url !== undefined) {
                url = fixURL(url);
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {
                        return;
                    }
                    if (url.endsWith(".css")) {
                        js = d.createElement('link');
                        js.id = "INJECTED_" + id;
                        js.setAttribute('type', 'text/css');
                        js.setAttribute('rel', 'stylesheet');
                    } else {
                        // assume js
                        js = d.createElement('script');
                        js.id = "INJECTED_" + id;
                    }
                    js.onload = function() {
                        if (callback !== undefined) {
                            callback();
                        } else {
                            console.log("%cFile '%c" + url + "%c' loaded!", blue, yellow, blue);
                        }
                    };
                    if (url.endsWith(".css")) {
                        js.setAttribute("href", url);
                    } else {
                        // assume js
                        js.src = url;
                    }
                    fjs.appendChild(js);
                }(document, 'head', scriptname));
            }
        };

        window.$ScriptInjector = SI;
        console.log("%c$ScriptInjector initialized. Use %c$ScriptInjector%c.%csearch%c and %c$ScriptInjector%c.%cinject%c to search and inject scripts!", blue, red, blue, green, blue, red, blue, green, blue);
    }

    var fixURL = function(url) {
        if (document.URL.indexOf("https://" === 0)) {
            url = url.replace("http://", "https://");
        }
        return url;
    }

    var renderHTMLTable = function(rows, clickFuncGenerator) {
        var div = document.createElement('div');
        div.setAttribute("style", "background-color: #ccf; color: #000; position: fixed; top: 0px; left: 0px; width: 600px; height: 600px; overflow: scroll; border: 1px solid #227")
        rows.forEach(function(row) {
            var newdiv = document.createElement('div');
            newdiv.onclick = clickFuncGenerator(row);
            newdiv.textContent = row;
            div.appendChild(newdiv);
        })
        document.getElementsByTagName('body')[0].appendChild(div);
    }

    var ezXHR = function(url, callback) {
        var nurl = fixURL(url);
        var request = new XMLHttpRequest();
        request.onload = function() {
            callback(this.responseText);
        };
        request.open("get", nurl, true);
        request.send();
    };

    ezXHR("http://api.cdnjs.com/libraries?search=&fields=version,description", reqListener);

})();