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

上面的脚本找到了类型为password的输入元素，但是没有添加事件监听器。

清单：

{
    "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。

Google Chrome扩展程序的内容脚本无法在少数页面上运行

1 个答案: