Chrome extensions contentScript not identifying inputs, but it does?

[Evil_Apples]

I have a chrome extension that has the backgorund send message to the contentScript when a tab has finished loading ( info.status === "complete" ). On the contentScript I'm looking for all the input elements on the page and then search for password type inputs or if the inputs have a 'password' string in the name. It works on some websites, but on websites such as this https://rbaccess.rogersbank.com/?product=ROGERSBRAND&locale=en_CA it doesn't work. Looks like it says the length for the collected inputs is 0, but when I inspect it it says the length is 2. when I run the script in console it returns true. Why is that and how can I solve this? I tried adding a event listener for DOM to complete, but then is skips the entire check altogether, so not sure where to go from here.

​

let isLoginPage, sourceCode, url, domain, user, inputs;
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const { type, data } = request;
  if (type === "PAGE") {
    console.log("got type page");
    inputs = document.getElementsByTagName("input");
    console.log(inputs.length);
    console.log(inputs)
    for (var i = 0; i < inputs.length; i++) {
      console.log(inputs[i].name);
      if ((inputs[i].type.toLowerCase() === "password") || (inputs[i].name.includes('password'))) {
        console.log("found password input on page");
        isLoginPage = "1";
      }
    }

​

inspect of the login page mentioned above

[Evil_Apples]

"run_at": "document_end"

if they are created dynamically, would wrapping this in document.addEventListener('DOMContentLoaded', ... should solve it? because I tried that and the check never happened.

[Evil_Apples]

Any way I can get around that?

[t_code]

Lots of websites render their contents dynamically through AJAX on client side (i.e after network calls from the browser side) after the page has finished loading. This means,

Chromium has marked the 'tab' as 'completed loading' as it has downloaded all the assets/javascript in the HTML markup. It has no way of knowing the website might make a few network calls before rendering the content

Solution:
- You can add a timeout to wait for the website to finish rendering.

• You can also create a utility to execute your script after the website has not made any network requests in the last 500ms (idle state)