Question

我正在创建我的第一个Chrome扩展程序，但该代码似乎无法正常工作。基本上现在，我希望扩展程序能够识别输入字段上的单击并发出警报。我认为该扩展程序无法识别点击。我已经尝试了多种方法，但这是最新的代码：

manifest.json

{
  "name": "Pi",
  "version": "1.0",
  "description": "Pi works!",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "browser_action": {
    "default_icon": {
      "32": "pie.png"
    }
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["contentScript.js"]
  }],
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    alert('HELLO WORLD!!');
});

contentScript.js

document.addEventListener('DOMContentLoaded', function(){
document.getElementsByTagName('input').addEventListener("click", function (){
  alert("Hi");
});

});

Answer 1

删除document.addEventListener('DOMContentLoaded', function(){实际上并不需要它。 chrome浏览器将根据run_at的{{1}}设置决定何时运行内容脚本，默认值为manifest.json。 See more here.

GodsArchitect的示例对于检测document_idle标签的click事件是正确的。但是，您可能需要考虑INPUT标签上的onFocus事件，以防用户使用键盘TAB键将焦点集中到输入字段上。

INPUT

Answer 2

以下内容可以完成这项工作。

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.tagName == 'INPUT'){
        alert('You clicked an Input!');
    }
}, false);

来源：https://stackoverflow.com/a/9012576/10383955

Chrome扩展程序未检测到输入字段

2 个答案: