Documentation

Table of Content

 

Introduction

The SharePoint DOM Injector is a SharePoint-hosted Add-In that lets you easily add customized scripts (JavaScript) and styles (CSS) to all pages of your site collection and all of its subsites. It follows Microsoft’s best practices for injecting JavaScript and CSS code.

 

Requirements

In order to use the SharePoint DOM Injector Add-In, make sure your environments meets the following requirements:

  • SharePoint Online or SharePoint 2016 On-Premise
  • “Classic experience”

 

Installation

Please follow these steps to set up the SharePoint DOM Injector Add-In:

  1. Install the SharePoint DOM Injector Add-In into your SharePoint environment by adding the Add-In into your SharePoint Add-In catalog.
  2. Add the SharePoint DOM Injector Add-In to any site
  3. Open the SharePoint DOM Injector Add-In and follow the instructions on the Add-In page:
    1. Follow the instructions here to turn on scripting capabilities. Please note that it can take up to 24 hours before the changes take affect.
    2. Download and run the activator program.
    3. Add some script and/or styles in the form below and click “save”.
  4. Installation complete: The entered script and style is automatically injected to all SharePoint pages (that run in classic mode)!

 

Troubleshooting

Activator program options

You can add the “–hep” switch to list all possible options to run the activator program:

>SharePointDomInjector.Activator.exe -h
Options:
  -s, --site=URL             URL to the SharePoint site.
  -u, --user=USER            USER to authenticate against the SharePoint site
  -p, --password=PASSWORD    PASSWORD to authenticate against the SharePoint site
  -v, --verbose              Enables debug message verbosity
  -h, --help                 Show this message and exit

 

Debugging the Add-In website

To debug the Add-In website, open the Add-In and add “&Debug=1” to the URL in your browser, reload the page and open your browser’s (JavaScript) console by pressing F12. The output should look like:

Debug mode enabled!
Got app web URL 'https://[...]' from query parameter 'SPAppWebUrl'
Got host URL 'https://[...]' from query parameter 'SPHostUrl'
Loading SP.RequestExecutor.js from 'https://[...]/_layouts/15/SP.RequestExecutor.js"
SP.RequestExecutor.js loaded successfully
Got site collection URL 'https://[...]'
Load log '/SiteAssets/weweave-domInjector.log'
Got log data
Load JavaScript '/SiteAssets/weweave-domInjector.js'
Got Javascript data
Load CSS file '/SiteAssets/weweave-domInjector.css'
Got CSS data
App initialization complete!