Расширение Chrome не определяет поле ввода

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, а по умолчанию manifest.json - document_idle. Подробнее здесь.

Пример GodsArchitect корректен для обнаружения события нажатия тегов INPUT.Однако вам может потребоваться учитывать событие onFocus для тегов INPUT в случае, если пользователи используют клавишу TAB на клавиатуре для фокусировки в поле ввода.

const inputTags = Array.from(document.querySelectorAll('input'))

inputTags.forEach(function (input) {
  input.addEventListener('focus', function (event) {
    alert("Hi...")
  }, false)
})

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