谷歌浏览器扩展的内容脚本在几个页面上不起作用

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 之后很久。

除了将处理程序绑定到现有元素之外，您还需要注意添加的新元素。我建议使用 mutation-summary library 和查询 {element: "input[type=password]"}，但如果您不想涉及库，则要查看的基本构建块是 MutationObserver。