I am trying to cancel the submission of the Microsoft web login page (https://login.microsoftonline.com) using chrome extensions and mostly vanilla javascript.

This is the part of content.js that is relevant (imagine that the username has been filled, you've refreshed the password input page after reloading the extension and you are now clicking the sign in buttton) :

document.body.addEventListener('click', function(e){
  form = document.querySelector('form')
  form.removeAttribute("data-bind");
  form.setAttribute("onsubmit", "return false;");
 }

The idea here is to simply cancel the form submission, whenever the sign in button is clicked.

This will effectively modify the DOM of the form, when inspecting the form after a click (anywhere on the page), however, clicking on the sign-in button, will still trigger the form submit, thus sending the POST request.

After many trials in separate directions, i came to the conclusion that the actual post request is not generated through a classic form submit but rather some custom code that i haven't had time to locate yet.

Furthermore, it seems like the MS client JS code is taking precedence over any other tampering my chrome extension code tries to insert for instance, i have tried setting all the input values to empty right at the sign-in click :

document.body.addEventListener('click', function(e){
  document.querySelectorAll("input").forEach( elem => {elem.value=""});
}

My biggest hurdle right now is that i want to cancel all the events that are listening to this sign-in button, whenever it is clicked, and insert my own logic.

I do not know if this technically doable with only vanilla, given that the primary method to cancel a form submit does not seem to work here ?

Of course if you see any other direction to cancel the form submit please i would ge glad to welcome any idea i haven't thought about yet.