skip to Main Content

Hi there i am building chrome extension and trying to click on send button.
before write code for it i was testing the simple js code to see if i can simulate clicks on send button.

here are few codes i tried

var button = document.querySelectorAll('.arco-btn.arco-btn-primary.arco-btn-shape-square.m4b-button')[0];    
var clickEvent = new MouseEvent('click', {
        listener : f Ur(),
        once: false,    // whether the event bubbles
        passive: false, // whether the event can be canceled
        type : "click",
        useCapture: false,
    });
    
    // Dispatch the event
button.dispatchEvent(clickEvent);

Simple try:

button.click()

simulating return key

const downEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });
const pressEvent = new KeyboardEvent('keypress', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });
const upEvent = new KeyboardEvent('keyup', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });

button.dispatchEvent(downEvent);
button.dispatchEvent(pressEvent);
button.dispatchEvent(upEvent);

but all in vain.
nothing is working.

here is html code of the element

<button data-tid="m4b_button" class="arco-btn arco-btn-primary arco-btn-size-small arco-btn-shape-square m4b-button" type="button">
<span>Send</span></button>

event bind to it.
enter image description here

Please suggest any solution, i tried everything listening to event invoking.
nothing helped

here is how it look like
enter image description here

2

Answers


  1. Chosen as BEST ANSWER

    So finally i was able to figure out, the website where i was injecting click event to button it was using react, so that's why simple click event was not working. this code worked for me.

    function dispatchReactClickEvent(element) {
          console.log('In dispatch event: ',element.textContent);
          return new Promise((resolve, reject) => {
          if (!element) {
            console.log('No element provided');
            reject('Element not found.');
            return;
          }
    
          let event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true
          });
        event.simulated = true; // Indicate that the event is simulated, useful for custom handlers
    
        // Attempt to find React's internal event handlers attached to the element
        let eventPropagators = Object.keys(element).find(key => key.startsWith('__reactProps$'));
        if (eventPropagators) {
            let clickHandler = element[eventPropagators].onClick;
            if (clickHandler) {
                // Directly invoke React's onClick handler with the simulated event
                clickHandler(event);
            }
        }
    
        // Dispatch the click event to the element to trigger any other non-React handlers
        element.dispatchEvent(event);
    
        // Use a timeout to simulate waiting for the event to have its effect
        // Adjust the timeout as necessary based on expected delays for actions to complete
        setTimeout(() => {
            resolve(true); // Resolve the promise after the delay
        }, 500); // Example delay of 500ms
    });
    

    }


  2. Following the comment section of your post, I assume you want to run a function that sends a message upon clicking a button on the page, or simulating a button click.

    Also in response to @JaromandaX’s comment, click() can be triggered at any time, even when operating inside of a Chrome Extension.

    I’m pretty sure your issue lies in the fact that your <button> tag is never closed. Here’s a JSFIDDLE that shows the code fully working with a closed button, a "click" event listener, and a "click" event being launched by the script.

    If the link above isn’t working, here’s the code snippets

    <button data-tid="m4b_button" class="arco-btn arco-btn-primary arco-btn-size-small arco-btn-shape-square m4b-button" type="button">
        <span>Send</span>
    </button>
    
    const button = document.querySelector(".arco-btn.arco-btn-primary.arco-btn-size-small.arco-btn-shape-square.m4b-button");
    
    button.addEventListener('click', (event) => { // Define your function here, or call an existing one.
        console.log("Just an example")
    })
    button.click()
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search