I am trying to code an auto login Chrome extension but I am unable to fill the inputs for Twitter. And there are 2 problems I am facing:

1. although I have set my content.js to run at the end of document in manifest.json it does not wait for Twitter to load completely and then inject the content.js.

"content_scripts": [
    {
      "run_at": "document_end",
      "js": ["js/lib/jquery-3.5.1.min.js","js/app/content.js"],
      "matches": ["https://twitter.com/i/flow/login"]
    }
]

2. I manage to wait for login page using setTimeout() but this time when I change the input value to my username and click next using code it throws the error username not found but manually it totally works.

setTimeout(()=> document.querySelector('input[type="text"]').value = "username" , 2500 );
setTimeout(()=> document.querySelectorAll('div[role="button"]')[2].click(),3500);
setTimeout(()=> document.querySelector('input[type="password"]').value = "password",4000);
setTimeout(()=> document.querySelectorAll('div[role="button"]')[2].click(),4500);

Can you please tell me what I am doing wrong? I even tried these codes manually from console in developer mode of Chrome but they did not work (I am only facing this problem with Twitter and my code works perfectly fine with other websites).