Блог

Я создаю базовое расширение Chrome, которое будет отправлять напоминания о сообщениях при вводе пользователем в любом месте веб-страницы. Однако я не уверен, как это сделать, я рассматривал возможность использования keyUp keyDown событий и, но я добился успеха, только если событие просматривает определенное поле, тогда как цель состоит в том, чтобы обнаружить текст в любом поле, где пользователь может ввести.

 let timer,
        timeoutVal = 1000; // time it takes to wait for user to stop typing in ms

const status = document.getElementById('status');
const typer = document.getElementById('typer');

typer.addEventListener('keypress', handleKeyPress);
typer.addEventListener('keyup', handleKeyUp);

// when user is pressing down on keys, clear the timeout
function handleKeyPress(e) {
    window.clearTimeout(timer);
  status.innerHTML = 'Typing...';
}

// when the user has stopped pressing on keys, set the timeout
// if the user presses on keys before the timeout is reached, then this timeout is canceled
function handleKeyUp(e) {
    window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
    timer = window.setTimeout(() => {
    status.innerHTML = 'Done';
  }, timeoutVal);
}
 

Каков наилучший способ достижения ожидаемого результата?

Имейте в виду, я пытаюсь заставить это расширение Chrome запускаться КАЖДЫЙ раз, когда пользователь вводит текст на веб-странице ИЛИ когда пользователь щелкает внутри текстового поля, чтобы начать ввод.

Расширение Chrome должно исчезнуть только в том случае, если у пользователя нет текста в текстовом поле, а текстовое поле неактивно (в противном случае, если в текстовом поле есть текст, оставьте расширение открытым).

Одним из вариантов является добавление прослушивателя событий к элементу html:

 document.querySelector('html').addEventListener('keypress', () => {
  console.log('asd')
});
 

Другой вариант — перебирать все поля, которые пользователь может ввести:

 document.querySelectorAll('input').forEach(inp => {
  inp.addEventListener('keypress', () => {console.log('asd')})
});