Scope

This article offers a generic and basic solution to add an outside component to Locator & Pages via JavaScript.

Introduction

The presented solution to inject an external HTML element to Locator & Pages uses JavaScript to insert the element after a specific element of Locator & Pages.

Script

window.setInterval(function() {
if(document.getElementsByClassName('myAddedParagraph').length == 0 && document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box').length > 0){
const cats = document.getElementsByClassName('ubsf_details-box-wrapper ubsf_categories-box')[0];
var html = "<p class=\"myAddedParagraph ubsf_details-box-wrapper\">newly added paragraph</p>";
cats.insertAdjacentHTML("afterend", html);
}
}, 500);

How it works

The JavaScript triggers every 500 millisecond and then looks for two things:

1- Does an element with class myAddedParagraph exist in this page?

2- Does an element with class ubsf_details-box-wrapper ubsf_categories-box exist in this page? (This is necessary since the new element is added after the Categories element)

If the answer of check 1 is No and the answer of check 2 is Yes, then a new HTML element is defined (cats) and added after the element with class ubsf_details-box-wrapper ubsf_categories-box.

Having the script run at fixed intervals means that it will keep working if the user changes to another page of the Locator.

Apply to other elements

A few things need to be modified in the script to be able to apply it to another use-case. In the provided example, a new paragraph is added under the Categories element of the Local Page.

- html string needs to contain the html structure of the new element

- The class name of the new element needs to stay consistent in the script (myAddedParagraph in this case)

- The class name of the element after which the new element needs to be added (ubsf_details-box-wrapper ubsf_categories-box in this case)

- The following can be changed to add the new element before the targeted element: afterend (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)