CODEWITHSUNDEEP
google-chrome-extensioncontent-script
Akhil Dixit
Akhil Dixit

Reputation: 135

Google Chrome extension's content script not working on few pages

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"
  ]
}

Upvotes: 0

Views: 1456

Answers (1)

Xan
Xan

Reputation: 77521

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.

Upvotes: 1

Related Questions