Google Chrome 扩展的内容脚本在几个页面上不起作用

Question

我正在开发一个简单的 Chrome 扩展，当密码输入框获得焦点时它会执行一些操作。我正在使用以下内容脚本来实现相同的目的（代码已简化以询问此问题）。该代码不适用于 https://accounts.google.com/ but it works perfectly for pages like 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 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.

Google Chrome 扩展的内容脚本在几个页面上不起作用

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

google-chrome-extension

content-script