Скрипт содержимого расширения Google Chrome не работает на нескольких страницах

Question

Я разрабатываю простое расширение Chrome, которое что-то делает, когда поле ввода пароля сфокусировано. Я использую следующий сценарий содержимого для достижения того же (код упрощен для запроса этого вопроса). Код не работает на таких страницах, как https://accounts.google.com/, но он отлично работает для таких страниц, как https://www.linkedin.com/. Это из-за некоторых конфликтов Javascript/JQuery? Или какая-то другая причина? Пожалуйста помоги. Я пробовал использовать noConflict api, но это не помогло.

Содержание сценария:

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(); 

Над сценарием находит элементы ввода паролей типа, но не добавляет прослушиватель событий.

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

Answer 1

Рассматривали ли вы, что поле ввода вы ищете, не существует к тому времени, что скрипт выполняет? https://accounts.google.com/ - это динамическая форма, поле пароля создается после загрузки страницы (document_end) и поэтому долго после того, как вы соберете inputs.

В дополнение к привязке обработчика к существующим элементам вам необходимо следить за добавлением новых. Я бы предложил использовать mutation-summary library с запросом {element: "input[type=password]"}, но если вы не хотите привлекать библиотеку, основной строительный блок, на который нужно смотреть, это MutationObserver.