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_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を収集してからずっと後になります。

ハンドラを既存の要素にバインドすることに加えて、新しい要素が追加されるのを監視する必要があります。クエリ{element: "input[type=password]"}でmutation-summary libraryを使用することをお勧めしますが、ライブラリを使用したくない場合は、参照する基本ビルディングブロックはMutationObserverです。