chrome-extension find login in modal

Question

my code so far

manifest.json

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-3.4.1.min.js", "content.js"]
    }
  ]

content.js

var password = $('input:password');
if (password.length > 0) {
    var inputs = $("input");
    var index = inputs.index(password);
    var username = inputs.eq(index - 1);
    console.log({password, username});
}

problem: i just find the input fields directly on the page. if there is a modal with login i'm not able to reach this. how can scan the modal for input fields too?

Probably because the modal is loaded after your code has been executed? It all depends on what modals and how they are loaded and what the look like and many other properties. You should give an example of what modal you are trying to read. — Jerodev, Jun 06 '19 at 10:27
i guess that is the problem it is loaded after the website itself is loaded. The question is how can i execute my code again after a modal or sth. is loaded? — JarITZ, Jun 06 '19 at 10:31

score 0 · Accepted Answer · answered Jun 06 '19 at 10:50

This is because initially, the model was not part of the DOM but when you triggered a function, showing model popup, it gets injected into the DOM.

As your content script is loaded only when DOM or page is completely loaded. So you are not able to find out the elements which are dynamically added. For this, you have to make use of Mutation Observer.

Here you will have a callback which will be called when new elements are added in the DOM. That is when your pop up is been shown. In that callback, you may call a function which will extract all HTML elements as per your requirement.

chrome-extension find login in modal

1 Answers1