0

I want to create a chrome extension that can simulate reply button of menu which appears when we click on small down arrow button of a message in the chat on WhatsApp Web.Screen Shot of reply button and arrow I was able to get DOM element using getElemntsByClassName() in the content script of extension, but unable to simulate mouseover/mouseenter event to display that small arrow button. That button will only appear when mouse hover the message.

var mainWindow = document.getElementsByClassName("z_tTQ")[0];  //get main div which contains msg boxes 
var msgs_in_boxes = mainWindow.getElementsByClassName("message-in") //get msg boxes
var msg_in_box = msgs_in_boxes[msgs_in_boxes.length - 1]; //get the last msg box div elem
var msg_in = msg_in_box.getElementsByClassName("_2et95 _3c94e")[0];  //get div inside the msg box
 
var event = new Event('mouseenter');
msg_in.dispatchEvent(event);

I have tried both mouseenter & mouseover events but unable to display arrow button programmatically. Also I have dispatched events on msg_in_box instead of msg_in. But not working

Are there any method to accomplish this task by java script in chrome extension? Or are there any similar extension available on the market. My objective is simulate click on reply button of a specific message(Let's say last message) (I want to mention that message programmatically) via chrome extension.

Edit:- I realized when I disable JS from devtools still that arrow button appearing and disappearing happens when mouse hover. It seems they use CSS to do that instead of onmouseenter of JS. How can I simulate that CSS :hover

Chamod
  • 587
  • 2
  • 6
  • 17
  • 1) Try `new Event('mouseenter', {bubbles: true})`, 2) Try inspecting the page script in devtools to reverse-engineer a direct method of invoking its reply feature. – wOxxOm Aug 05 '20 at 03:06
  • @wOxxOm thanks for replying. But it didn't worked. And also I realized when I disable JS from devtools still that arrow button appearing and disappearing in mouse hover. It seems they use CSS to do that instead of `onmouseenter` of JS. I can't directly access the reply feature bcz chrome content script are isolated from main scripts in the site – Chamod Aug 05 '20 at 07:40
  • If it's pure CSS then you don't need to show the menu: simply get the hidden element for the reply button. Use devtools inspector to find it. P.S. As for direct access to the feature, it's possible in [page context](/a/9517879). – wOxxOm Aug 05 '20 at 07:44
  • @wOxxOm I search that button in devtools when it is not appear but there is no button. when I hover the button html code modified and added that button. How could it possible when I disable JS. Actually I have no idea how could they do that when JS is disabled. – Chamod Aug 05 '20 at 07:54
  • Maybe their UI is displayed inside an iframe, but you disabled JS only on the main site. – wOxxOm Aug 05 '20 at 09:23
  • @wOxxOm I will check it. Thanks – Chamod Aug 05 '20 at 09:59

0 Answers0