Как достать значение из поля ввода на mail.ru?

[kocmohabt228]

В общем стоит задача написать код на JS, чтобы когда пользователь отправляет письмо не на домен организации (@vtb.uk), то ему вылазит окошко с предупреждением об этом.

const org = '@vtb.uk';

function checkAndWarnRecipient() {
  const sendButton = document.querySelector('[tabindex="570"]');
  if (!sendButton) return;

  sendButton.addEventListener('click', (event) => {
    console.log('Send button clicked');
    const addressNodes = document.querySelectorAll('[tabindex="100"]');
    const value = addressNodes.value
    console.log('Address nodes:', value);
    const addresses = Array.from(addressNodes, (addressNode) =>
      addressNode.textContent || addressNode.value
    );
    console.log('Addresses:', addresses);

    const isValid = addresses.every(
      (address) => !address || address.endsWith(org)
    );
    console.log('IsValid:', isValid);

    if (!isValid) {
      const isConfirmed = window.confirm('WARNING!');
      console.log('Confirmation:', isConfirmed);
      if (!isConfirmed) {
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();
        console.log('Event prevented');
      }
    }
  });
}

checkAndWarnRecipient();

Тестирую прямо в консоли браузера и вот что выдает при отправке на сторонний домен:
Send button clicked
Address nodes: undefined
Addresses: ['']
IsValid: true

Он как-будто не читает поле ввода с адресом или же не достает его значение, а может и не успевает его прочесть. Может ли кто-то зайти на mail.ru и помочь разобраться в чем дело? Буду благодарен за любую помощь!
Название поля ввода выглядит вот так:
<input class="container--H9L5q size_s_compressed--2c-eV" type="text" tabindex="100" value="" style="width: 12px;">

[voraa]

const addressNodes = document.querySelectorAll('[tabindex="100"]');
    const value = addressNodes[0].value

querySelectorAll - выдает не один элемент, а список. Список даже если такой элемент один.
Поэтому надо либо

const addressNodes = document.querySelector('[tabindex="100"]');
    const value = addressNodes.value

, если элемент точно один, либо

const addressNodes = document.querySelectorAll('[tabindex="100"]');
    const value = addressNodes[i].value

, если их может быть несколько, но надо взять i-ый

Почему
Addresses: ['']
сказать трудно не видя всей страницы. Надо смотреть, что там выдается.

const addressNodes = document.querySelectorAll('[tabindex="100"]');
    console.log('addressNodes', addressNodes)
    const value = addressNodes[0].value
    console.log('Address nodes:', value);
    const addresses = Array.from(addressNodes, (addressNode, i) =>{
      console.log('addressNode', i, addressNode);
      addressNode.textContent || addressNode.value;
    }
    );

[kocmohabt228]

Спасибо, разобрался. Оказывается было дело в другом: поле для ввода преобразовывалось в другой элемент. Переделал код, теперь работает более-менее корректно кроме одного момента: при отправке письма на чужой домен выходит предупреждение, при нажатии на "Отмена" предупреждение закрывается и отправка останавливается, а при нажатии на "ОК" предупреждение закрывается и моментально бесконечно открывается заново, не отправляя письмо. Есть ли какие-то идеи как можно это пофиксить?

const org = '@vtb.uk';

function checkAndWarnRecipient() {
  const sendButton = document.querySelector('[tabindex="570"]');
  if (!sendButton) return;

  sendButton.addEventListener('click', (event) => {
    console.log('Send button clicked');

    const tooltipElement = document.querySelector('[class^="tooltip-"][data-test-id^="tooltip-operand-"]');
    const tooltipId = tooltipElement.getAttribute('data-test-id');

    const emailMatch = tooltipId.match(/tooltip-operand-(.+)$/);
    const email = emailMatch[1];
    console.log(email);
    if (emailMatch) {
      console.log('OK')
    } else {
      console.log('Mail not found');
    }

    if (email.indexOf(org) === -1) {
      const isConfirmed = window.confirm('ВНИМАНИЕ! Отправить сообщение на сторонний домен?');
      console.log('Confirmation:', isConfirmed);
      if (!isConfirmed) {
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();
        console.log('Event prevented');
      } 
	  else {
	    console.log('Da');
      }
    }
  });
}

function observeMutations() {
  const targetNode = document.body;
  
  const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
		checkAndWarnRecipient();
      }
    }
  });
  
  const config = { childList: true, subtree: true };
  
  observer.observe(targetNode, config);
}

observeMutations()

[voraa]

Вижу такой недостаток. При каждом вызове checkAndWarnRecipient из observeMutations на кнопку отправки будет вешаться ваш обработчик. При этом и старые остаются. Вешая новый обработчик, не отменяется старый. Таким образом на кнопку может быть повешано 100500 одинаковых обработчиков, и все они будут последовательно срабатывать при клике.

[kocmohabt228]

Я пытаюсь сделать расширение и поэтому мне нужно чтобы код работал постоянно. Пытался убрать observeMutations и сделать интервальный запуск функции/игрался со слипами. Но ничего не выходит, можно ли как-то сделать по другому чтобы код всегда работал?

[Aetae]

kocmohabt228, использовать код, который я предложил в предыдущем твоём вопросе. С поправками. Там вешается один единственный обработчик на окно, а кнопки и текст получаются уже внутри. И никаких MutationObserver не надо.