JavaScript on Every Page of SharePoint Online (Office 365)

Tim Ferro on GitHub (vball525)

BLUF: Here’s a single JavaScript (JSOM) file you can use to add a JavaScript file reference on every page in SharePoint Online (Office 365) without an App!

Scenario: You need to run some JavaScript on every page in your site collection in SharePoint Online (Office 365). You don’t want to use a custom master page (because Microsoft is now recommending you not do this anymore), AND you don’t want to have to write an App to do something this simple. I was in this exact situation last week and I wanted a quick but effective way to handle this situation. I kept thinking that there has to be an easy way to do this without an App or a custom master page. GOOD NEWS, THERE IS.

JSOM to the rescue! After a bit of searching around the Internet, I found a couple of great references: here and here. They were so close but I needed to do a little tweaking to get it just right. I just wanted ONE single file that does everything for me. When a simple, single file solution didn’t exist, I created one (mostly from the previous references) and posted it to my GitHub account here! *Note I could not find a way to get CSS with HTC references working (example here). Please let me know if you can and how.

Step 1: Download RegisterJavaScript.js and alert.js (this is the file you want registered on every page in Office 365) from GitHub. Important! Comment out the following lines, then save.

Step 2: Upload them both to your Office 365 tenant. Upload the alert.js file to the “Site Assets” document library. Upload the RegisterJavaScript.js file to any document library you wish.

Step 3: Create a new page. Call it anything you wish, as you will delete this after one use. I called mine “RegisterScript”.

Step 4: Add a Content Editor Web Part to the page and link it to the RegisterJavaScript.js file. Be sure you followed Step 1 and commented out the lines.

Step 5: Save the page, refresh the page, and make sure there are no errors.

Step 6: Uncomment the lines you commented out earlier and in a different tab reupload to the Site Assets library.

Step 7: Refresh the RegisterScript page again. You should see a success pop up!

Step 8: DO NOT REFRESH THE PAGE. Click ok. Close that tab. Do not save anything. From the other tab you have open, click the link for Site Contents. Navigate to the document library where your new page is and DELETE IT. If it is successful, you only need to run this one time.

Step 9: Verify via JavaScript tools. For this example I will show the F12 Developer Tools for Internet Explorer.

DONE! All-in-one file using JSOM you have registered your JavaScript file in SharePoint Online (Office 365) on every page. I have tested this in multiple Office 365 tenants.

I hope this is easy, simple, and helps. Please leave comments or feedback so that it can help others.

Tim Ferro

Trackbacks Comments
  • Good idea. I don’t like the way you insert the custom action though, seems kinda troublesome. I would propose to use the developer tools of the browser and just write it in the javascript console.

    Another concern I have with this type of customization is that it is very hard for anybody but the original developer to know about. Since there is no traces of how it was installed. But of course that is a personal thing.

  • saroj kumar mishra says:

    thanks a lot!!
    it worked…

  • saroj kumar mishra says:

    it would be great …if there is a way to remove the js

  • Tim says:

    Simon, glad you like the idea and I completely agree with your concerns. I look at this as a proof of concept that allowed me to do this without an App. I would definitely recommend having a way to track and remove this. Maybe a page with a content editor we part that allows you to add and remove the JS.

    Saroj, I believe you are looking for “SP.UserCustomAction.deleteObject” https://msdn.microsoft.com/en-us/library/office/jj246844.aspx

  • Tapon says:

    Thanks, it works awesome

  • MAZ says:

    Hi,
    Thank your for your post. What about doing the same thing in all sub-sites in site collections ?

  • Mike says:

    I expanded on your work a bit with a UI for deployment/removal and a few other bells and whistles. It’s too bad the CSOM method isn’t documented well by Microsoft. It would be nice if we were able to deploy the scriptlink at a higher level than just the context of the current site collection. I also cannot find any examples of using CSOM to remove a specific custom action from a site collection. I found an example for the web level. For now I had to resort to clearing all customizations (fortunately I don’t have any others yet).

  • Rahul says:

    Thanks for this post. while taking reference of this post. Powershell worked very smooth

    $securePassword = ConvertTo-SecureString $password -AsPlainText -Force
    $spoCred = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $securePassword)
    $ctx = New-Object Microsoft.SharePoint.Client.ClientContext($spUrl)
    $ctx.Credentials = $spoCred

    $site = $ctx.Site
    $action = $ctx.Site.UserCustomActions.Add();
    $action.Location = “ScriptLink”
    $action.Name = $actionName
    $action.ScriptSrc = $ScriptSrc
    $action.Sequence = $Sequence
    $action.Update()
    $ctx.ExecuteQuery()

    Write-Host “Success for ” $spUrl

  • Zina says:

    Hi,
    Good idea.
    Somebody can help me.
    Is it possible to inject JavaScript on the _layouts page like upload.aspx page?

Leave a Comment