Chrome Extension: Unable to get DOM elements after DOM is ready in Angular sites

In angularJS based websites like https://sa.corp.saint-lukes.org/secureauth11/ I need to get all the password elements present in the page using JavaScript or jQuery.

$("input[type='password']") when we run the above jQuery in chrome browser console we will get two fields. one field is visible to UI and the other is hidden due to 'aria-hidden' property to angular.

But when we run the above jQuery just after the document is loaded then I am getting only one field which is hidden because there are multiple calls in the network that are pending at that particular time which loads the second password field(which is visible to UI).

Tried following approaches under content script

1. onLoadn event in jQuery and javascript

$(window).on('load', function () {
         console.log($("input[type='password']"));
         //you will get only one field
    })

2. ajaxStop: not worked under content script

$(document).ajaxStop(function () {
    console.log($("input[type='password']"));
});

also tried $.ajaxSetup() before the above code

3. jQuery ready and when methods

$.when($.ready).then(function () {
    console.log($("input[type='password']"));
});

it does not work on the first time after that it caches so it works sometimes

4. monitor the network requests in background.js

var numberOfRequests = 0
chrome.webRequest.onCompleted.addListener(
  function(details) {
    numberOfRequests--
    if (!numberOfRequests) {
      console.log('send message to content to fetch for input tags');
    }
    console.log(numberOfRequests);
  }, {
    urls: ["<all_urls>"]
  }
);

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    numberOfRequests++
    console.log(numberOfRequests);
  }, {
    urls: ["<all_urls>"]
  }
);

5. MutationObserver

    let observer = new MutationObserver((mutations) => {
        console.log(mutations);
    })

    observer.observe(document.body, {
        childList: true
        , subtree: true
    })

How can we check that there are no mutations going on in the above code?

6. Dynamically created the script and injected to DOM content.js

    const script = document.createElement('script')

    script.setAttribute('src', chrome.extension.getURL('inject.js'))
    script.defer = true

    document.body.appendChild(script)

    script.onload = () => {
        console.log('script loaded');
    }

    const onMessage = ({ data }) => {
        console.log(data.message);
        console.log($("input[type='password']"));
        window.removeEventListener('message', onMessage)
    }
    window.addEventListener('message', onMessage)

inject.js

; (function () {
    try {
        postMessage({
            message: 'dom_ready'
        })
    } catch (e) {
        // Fail quietly
        console.log(e);
    }
})()

manifest.json

...
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_end",
      "js": [
        "jquery.js",
        "content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "inject.js"
  ]
...

After all, this finds one solution to this is settimeout method which is not the ideal case as some sites load the DOM fast and there will be a delay.

$(window).on('load', function () {
        setTimeout(() => {
            console.log($("input[type='password']"));
        }, 1800);
});

Any solution with some explanation is appreciated.