0

In my js code, on a button click, I want to open the site in new tab and scroll to the selector's location, and highlight it.

Individually, I am able to achieve it, but when I try to peace it together, the selector is not highlighting

Following is the snippet which is to run in websites console

Website :- https://careers.mestel.com/

#go to website
window.open('https://careers.mestel.com/');

#Scroll to the view where selector is present
document.querySelector('ppc-content[key="footer-mestelFooterContent11"]').scrollIntoView();

# Highlight the selector
css_highlight = document.querySelector('ppc-content[key="footer-mestelFooterContent11"]')
css_highlight.style.outline = '#FDFF47 solid 5px'

Only window.open action is getting performed, other actions are not getting perform. Please suggest how to inject remaining js code after window.open. The final expected result will be is as shown in the following image

enter image description here

Mahesh
  • 1,117
  • 2
  • 23
  • 42

1 Answers1

0

It is because the code will continue to execute in the window that is currently running (not the new opened one). You can inject new code in a new window in this way (not the only way):

var newWindow = window.open('https://careers.mestel.com/');
var newScript = document.createElement('script');

function injectScript() {
    // The code to inject
}

newScript.innerHTML = injectScript.toString() + ';';
newWindow.document.body.appendChild(theScript);
Greedo
  • 3,438
  • 1
  • 13
  • 28