Interactive Business Systems is now Planet Technology. Looking for a new job? We work with some of the biggest names in tech, and we’re hiring! Check out our open jobs and make your next career move with Planet.
Don’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.
[code language="html"]
<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>
[/code]
[code language="javascript"]
(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";
}
})();
[/code]
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.