Chrome Extension- Automate/Perform Hover Event on an element in webpage

Question

Wanted to perform hover on nav menu item which should show the sub menu.

 chrome.scripting.executeScript(
      {
        target: {tabId: tabId},
        func: hoverFunction,
        args:[id]
      },
(injectionResults) => {
// perform something post execution
});

function hoverFunction(id){
let element = document.getElementById(id);
element.addEventListener('mouseover', function() {
  console.log('Event triggered');
});

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
element.dispatchEvent(event);
}

Tried to simulate the mouse over event on a menu item, I see the event getting triggered as I see console log getting printed but the submenu doesn't popup on script execution..

Tried to simulate/dispatch the mouse over event on a menu item, I see the event getting triggered as I see console log getting printed but the submenu doesn't popup on script execution..

My expectation is I should be able to automate/perform hover on a element with script and get the expected events to happen..In this case , the submenu to popup or to show tooltip for the elements if any on mouseover..

I think this question is the same as this one. [How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) — Norio Yamamoto, Nov 29 '22 at 06:19
Tried those solutions. Only solution which helps in that is https://stackoverflow.com/a/37317431. But that creates hover on all the elements in the document. But trying to get cssrules for a particular element with pseuodoelement , the solution doesn't work as rules turnout to be empty for ":hover" — Ravi Teja, Nov 29 '22 at 13:36
Are you triggering the event after the page loads? Just one thing to make sure. — user2924019, Dec 04 '22 at 23:31

score 0 · Answer 1 · answered Nov 28 '22 at 22:19

0

I try to shoot blind:
in my opinion there is a good chance it will work by adding world: "MAIN" inside executeScript

answered Nov 28 '22 at 22:19

Robbi

1,254
2
8
11

Tried with world: "MAIN" inside executeScript. It does not work. – Ravi Teja Nov 29 '22 at 13:44
ok, I tried. I wouldn't want to lead you astray since I don't recall ever having to deal with a similar situation. I think you should understand how the submenu is activated. Is it all css or is there some line of javascript? Also, if you can, share with us the url of the page where this menu is. – Robbi Nov 29 '22 at 13:55
I wanted to automate hover/mouseover across any webpage..so it might be css :hover or mouseover event. For reference , you can see the hoverme button in this page for reference. https://www.w3schools.com/howto/howto_css_dropdown.asp – Ravi Teja Nov 30 '22 at 08:14
I played a bit in the w3school "playground" and verified that your code (dispatch the mouseover event) would work if the menu was activated by javascript and not by css. I suggest you look into the link posted by @Norio Yamamoto – Robbi Nov 30 '22 at 09:16
As mentioned above , tried those solutions from this link for css hover. Only solution which helps in that is stackoverflow.com/a/37317431. But that creates hover on all the elements in the document. But trying to get cssrules for a particular element with pseuodoelement , the solution doesn't work as rules turnout to be empty for ":hover" – Ravi Teja Nov 30 '22 at 17:08

Chrome Extension- Automate/Perform Hover Event on an element in webpage

1 Answers1