Inject Scripts in SharePoint with JavaScript 3

Mike BerrymanDon’t worry, it’s the good kind of Script Injection!

I was recently working in a SharePoint environment where I wanted to have some JavaScript libraries (like jQuery and moment.js) available across the entire site collection.  The most obvious solution would be to add a reference to each library into the master page(s) used across the sites in the site collection but for this situation editing any master page was not an option.  Instead I wanted to use User Custom Actions to do script injection.

User Custom Actions have been in SharePoint for a while, but in SharePoint 2010 they were updated to allow for “injecting” scripts into the <head> element of the DOM.  You could inject a script block (basically just a snippet of JavaScript code) or reference a .js file just like a normal <script> tag would.

I’d used User Custom Actions before to inject scripts in the context of adding buttons to the SharePoint Ribbon (another use for User Custom Actions), but every time I’d done that in the past was through the server-side object model with C# code.  For this situation I was doing development in a SharePoint Online environment, so utilizing the server-side object model was off the table.

After some trial and error I managed to come up with a completely native (by which I mean no additional libraries because obviously those libraries aren’t there when the purpose of the code is to inject them) JavaScript solution that will create a set of User Custom Actions to inject these scripts.

<h1>Manage Script Injection</h1>
<br />
<div style="color: red; display: none;" id="msi-errors"></div>
<div id="msi-not-site-collection-admin-section" style="display: none;">
    Only site collection administrators can manage script injection.
</div>
<div id="msi-site-collection-admin-section" style="display: none;">
    <h3>Current Injected Scripts</h3>
    <ul id="msi-injected-scripts">
    </ul>
    <br />
    <input type="button" value="Inject Scripts" id="msi-btn-inject" style="margin-right:10px;" /><input type="button" value="Remove Scripts" id="msi-btn-uninject" />
</div>
(function() {
    var MyNamespace = MyNamespace || {};
    MyNamespace.Admin = MyNamespace.Admin || {};
    MyNamespace.Admin.MSI = MyNamespace.Admin.MSI || {};

    ExecuteOrDelayUntilScriptLoaded(init, 'sp.js');

    function init() {
        attachEvents();
        MyNamespace.Admin.MSI.clientContext = new SP.ClientContext.get_current();
        MyNamespace.Admin.MSI.currentUser = MyNamespace.Admin.MSI.clientContext.get_web().get_currentUser();
        MyNamespace.Admin.MSI.clientContext.load(MyNamespace.Admin.MSI.currentUser);
        
        MyNamespace.Admin.MSI.scriptsToInject = [
            { src: "~SiteCollection/MyAssets/components/jquery/jquery.3.0.0.min.js", sequence: 2, title: "MySite SPSite Script Injection - jQuery" },
            { src: "~SiteCollection/MyAssets/components/lodash/lodash.4.13.1.min.js", sequence: 3, title: "MySite SPSite Script Injection - lodash" },
            { src: "~SiteCollection/MyAssets/components/moment/moment.2.14.1.min.js", sequence: 4, title: "MySite SPSite Script Injection - moment" }
        ];
        
        MyNamespace.Admin.MSI.clientContext.executeQueryAsync(function(sender, args) {
            var isSiteAdmin = MyNamespace.Admin.MSI.currentUser.get_isSiteAdmin();
            if (isSiteAdmin) {
                fetchSiteCustomActions();
            }
            else {
                document.getElementById("msi-not-site-collection-admin-section").style.display = "block";
            }
        }, function(sender, args) {
            var msg = args.get_message() + "<br />" + args.get_stackTrace();
            setError(msg);
        });
    }

    function attachEvents() {
        document.getElementById("msi-btn-inject").onclick = injectScripts;
        document.getElementById("msi-btn-uninject").onclick = uninjectScripts;
    }

    function fetchSiteCustomActions() {
        MyNamespace.Admin.MSI.currentSite = MyNamespace.Admin.MSI.clientContext.get_site();
        MyNamespace.Admin.MSI.currentSiteUserCustomActions = MyNamespace.Admin.MSI.currentSite.get_userCustomActions();
        MyNamespace.Admin.MSI.clientContext.load(MyNamespace.Admin.MSI.currentSiteUserCustomActions);
        MyNamespace.Admin.MSI.clientContext.executeQueryAsync(function(sender, args) {
            var enumerator = MyNamespace.Admin.MSI.currentSiteUserCustomActions.getEnumerator();
            var listingContainer = document.getElementById("msi-injected-scripts");
            while (enumerator.moveNext()) {
                var item = enumerator.get_current();
                if (item.get_title().indexOf("MySite SPSite Script Injection") === 0) {
                    listingContainer.innerHTML = listingContainer.innerHTML + "<li>" + item.get_title() + "</li>";
                }
            }
            document.getElementById("msi-site-collection-admin-section").style.display = "block";
        }, function(sender, args) {
            var msg = args.get_message() + "<br />" + args.get_stackTrace();
            setError(msg);
        });
    }

    function injectScripts() {
        for (var i = 0; i < MyNamespace.Admin.MSI.scriptsToInject.length; i++) {
            var scriptToInject = MyNamespace.Admin.MSI.scriptsToInject[i];
            var enumerator = MyNamespace.Admin.MSI.currentSiteUserCustomActions.getEnumerator();
            var addScript = true;
            enumerator.reset();
            while (enumerator.moveNext()) {
                var item = enumerator.get_current();
                if (item.get_title() === scriptToInject.title) {
                    addScript = false;
                    break;
                }
            }
            if (addScript) {
                var newUserCustomAction = MyNamespace.Admin.MSI.currentSiteUserCustomActions.add();
                newUserCustomAction.set_location('ScriptLink');
                newUserCustomAction.set_scriptSrc(scriptToInject.src);
                newUserCustomAction.set_sequence(scriptToInject.sequence);
                newUserCustomAction.set_title(scriptToInject.title);
                newUserCustomAction.update();
            }
        }
        
        MyNamespace.Admin.MSI.clientContext.executeQueryAsync(function(sender, args) {
            //all done, refresh
            location.reload();
        }, function(sender, args) {
            var msg = args.get_message() + "<br />" + args.get_stackTrace();
            setError(msg);
        });
    }

    function uninjectScripts() {
        var enumerator = MyNamespace.Admin.MSI.currentSiteUserCustomActions.getEnumerator();
        var scriptsToDelete = [];
        while (enumerator.moveNext()) {
            var item = enumerator.get_current();
            if (item.get_title().indexOf("MySite SPSite Script Injection") === 0) {
                scriptsToDelete.push(item);
            }
        }
        for (var i = 0; i < scriptsToDelete.length; i++) {
            scriptsToDelete[i].deleteObject();
        }
        MyNamespace.Admin.MSI.clientContext.executeQueryAsync(function(sender, args) {
            //all done, refresh
            location.reload();
        }, function(sender, args) {
            var msg = args.get_message() + "<br />" + args.get_stackTrace();
            setError(msg);
        });
    }

    function setError(msg) {
        var errorSection = document.getElementById("msi-errors");
        errorSection.innerHTML = msg;
        errorSection.style.display = "block";
    }
})();

This script basically uses the client-side object model via JavaScript to access and modify the UserCustomActions collection on the site collection.  It also has safeguards against adding the same custom action more than once.  Using this I was able to create a basic script injection management solution that adds the JavaScript libraries to all pages in my entire site collection.

3 comments

  1. Pingback: Managing content for similar SharePoint sites « The Chronicles of Nerdia

  2. Pingback: Form validation and custom save functionality in the standard SharePoint List Form « The Chronicles of Nerdia

  3. Pingback: Adding Javascripts to your master page without touching the master page – Becky's SharePoint Journey

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s