0

I am developing a simple Chrome extension, that does something when a password-input box is focused. I'm using following content script to achieve the same (code is simplified for asking this question). The code does not work on pages like https://accounts.google.com/ but it works perfectly for pages like https://www.linkedin.com/. Is it because of some Javascript/JQuery conflicts? Or some other reason? Please help. I tried using noConflict api, but it didn't help.

Content script:

var inputs = document.getElementsByTagName('input');
function foo() {
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type.toLowerCase() == 'password')
            inputs[i].addEventListener("focus", bar);
    }
}

function bar() {
    alert(1);
}

foo();

Above script finds input elements of type passwords, but does not add event listener.

Manifest:

{
    "manifest_version": 2,
    "name":    "MyExtension",
    "version": "1.0",
    "options_page": "options.html",
    "browser_action": {
        "default_icon": "img/abcd.png",
        "default_title": "MyExtension",
        "default_popup": "popup.html"
    },"icons": { "16": "img/abcd16.png",
           "48": "img/abcd48.png",
          "128": "img/abcd128.png" },"description":"abcd abcd",
    "permissions": [
        "storage","tabs"
     ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"
            ],
            "js":     ["js/content.js","js/jquery.1.8.3.min.js"],
            "css": ["css/style.css"],
            "run_at": "document_end",
            "all_frames": true
        }
    ],"web_accessible_resources": [
    "img/*.png",
    "css/*.css"
  ]
}
Akhil Dixit
  • 125
  • 1
  • 2
  • 8

1 Answers1

1

Have you considered that the input field you seek doesn't exist by the time that the script executes? https://accounts.google.com/ is a dynamic form, the password field is created long after the page is loaded (document_end) and therefore long after you collect inputs.

In addition to binding the handler to existing elements, you need to watch for new ones being added. I would suggest using mutation-summary library with a query {element: "input[type=password]"}, but if you don't want to involve a library the basic building block to look at is MutationObserver.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • The author said he found inputs, but focus event is not triggered. – Haibara Ai Apr 25 '16 at 07:15
  • I'm not convinced. The code he posted wouldn't find them. And debugging "simplified code" may be pointless (may not, maybe it's a proper MCVE). – Xan Apr 25 '16 at 07:18
  • This probably helps Xan! Because whatever websites its working, they have password field at the time of page load. Although, on Google, my code can find password-input with id Passwd-hidden! But it is shown to the user dynamically. – Akhil Dixit Apr 25 '16 at 07:21
  • @AkhilDixit, is that mean the problem solved or not? when the input is in focused state, any other focus won't trigger the focus event – Haibara Ai Apr 25 '16 at 07:29
  • Another possibility: this may not trigger for focus that's set by scripts. – Xan Apr 25 '16 at 07:30
  • The problem is not solved yet. Also, like focus, I tried keyup event too. That event is also not getting triggered on Google page, but works fine on other pages. – Akhil Dixit Apr 25 '16 at 07:38
  • Instead of that mutation observer, I checked for newly added password fields every second using setTimeout function. Still didn't help!:( – Akhil Dixit Apr 25 '16 at 07:47
  • Problem is solved. It was a combination of whatever possibilities you discussed Xan, thanks a lot. – Akhil Dixit Apr 25 '16 at 08:31
  • I encourage you to post a separate answer detailing what you had to combine to get it working. I would upvote that. – Xan Apr 25 '16 at 08:33