My plan is to develop a Chrome extension that can automatically fill passwords. The code for this functionality looks like the following:
//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
fillPassword();
})
function fillPassword() {
let password = '';
// perform operations to retrieve password
document.querySelector("input[type=password]").value = password
}
Everything seems to be working fine, as the password is retrieved and set correctly, except when attempting to log in. Upon clicking the login button, I receive an error message stating 'password cannot be empty'. This leads me to the issue at hand.
The website is built using Vue.js, which means the change event is not triggered, resulting in the password not being properly set in the login form. My current dilemma revolves around how to trigger the change event of the input so that its value can be captured by Vue accurately.
In an attempt to troubleshoot my idea, I added a listener to the password input.
//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
fillPassword();
})
document.querySelector("input[type=password]").addEventListener('change', () => {
console.log('changed')
})
function fillPassword() {
let password = '';
// perform operations to retrieve password
document.querySelector("input[type=password]").value = password
}
However, there were no prints as expected. Consequently, I decided to try triggering the change event, but it appears to have no effect.
const e = new Event("change");
const element = document.querySelector("input[type=password]")
element.value = password;
element.dispatchEvent(e);