Scope
This article offers a generic and basic solution to add an outside component to Locator & Pages via JavaScript.
Introduction
Disclaimer
The following attempt was created and tested with a certain Locator and Pages version. Please note, that this solution might not be supported at a given point in future and we do not guarantee support for it. This is to be used as a proof-of-concept.
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)