Here's the solution I came up with, which is not supported in any way by ServiceNow, of course. (They told me so in the support case I opened). This is a global UI script, just like the previous solution with UI16.
Having document objects nested in multiple shadow DOMs makes this a little more complicated than the old solution.
One improvement this needs is to stop observing the "dom:loaded" event after this is run in order to prevent this from being run more than one time. Currently it will re-run every time a glideForm or glideList is loaded. I was not able to find a solution for this, so any suggestions for improvement would be welcome.
$(document).observe('dom:loaded', function() {
try {
var text = getMessage('Open Service Portal') + '';
// get document object
// jQuery selector used to avoid a health scan flag
// addressing the top object is necessary because the scoped window and document objects
// in this UI script are within a shadow DOM and is not an ancestor of "macroponent"
var d = $(top).window.document;
// get shadow DOM of header
var headerRoot = d.querySelector('macroponent-f51912f4c700201072b211d4d8c26010')
.shadowRoot.querySelector('sn-polaris-layout')
.shadowRoot.querySelector('sn-polaris-header')
.shadowRoot;
// prevent more than one portal link from being added
if (headerRoot.querySelector('.custom-service-portal-link')) return;
// get user menu component
var menu = headerRoot.querySelector('.user-menu-controls');
// build button element and necessary child elements for new link
var button = d.createElement('button');
button.className = "user-menu-button keyboard-navigatable polaris-enabled custom-service-portal-link";
button.addEventListener('click', goToPortal);
var div = d.createElement('div');
div.className = "user-menu-label polaris-enabled";
var icon = d.createElement('now-icon');
icon.className = "user-menu-icon polaris-enabled";
icon.setAttribute("icon", "square-share-fill");
button.append(div);
div.append(icon);
div.append(text);
// add button element to user menu
menu.append(button);
} catch (e) {}
function goToPortal() {
$(top).window.location.href = '/sp';
}
});
