Расширение google chrome для почты

[kocmohabt228]

Всем привет! Нужно написать расширение для google chrome. Функционал расширения: когда пользователь на сайте mail.ru нажимает кнопку "отправить" письмо пользователю, домен которого не принадлежит организации (@vtb.uk), то отправление должно перехватить окно, на котором находится предупреждение об отправке на чужой домен с кнопками «отмена» и “отправить» и только потом отменяло/отправляло письмо. Не прошу Вас за меня все делать. Просто хочу узнать с чего можно начать, какие файлы требуются для этого и что в них должно быть, и как прикрепить триггер именно на кнопку "Отправить".

[Aetae]

Ну условно скрипт такой:

{
  const org = '@vtb.uk';
  addEventListener('click', (event) => {
    const isSendButton = event.target.closest('<селекторы для кнопки отправить>');
    if (!isSendButton) return;

    const addressNodes = document.querySelectorAll('<селекторы для полей ввода адреса>');
    const isValid = Array.from(addressNodes, (addressNode) => addressNode.textContent || addressNode.value)
      .flatMap((addressList) => addressList.trim().split(/[,;\s]+/))
      .every((address) => !address || address.endsWith(org));
    if (isValid) return;

    const isConfirmed = confirm('Отправить на чужой домен?');
    if (isConfirmed) return;

    event.preventDefault()
    event.stopImmediatePropagation()
    event.stopPropagation()
  }, true);
}

Кладём его в content.js расширения для домена почты и готово.

Тестировать можно просто в консоли руками.

[kocmohabt228]

А расскажите поподробнее в какой консоли я могу это протестить, а то совсем нулевой в JS. Закинул этот код в content.js и выставил селектора ('body > div:nth-child(1) > div > div.compose-app.compose-app_fix.compose-app_popup.compose-app_window.compose-app_adaptive > div > div > div > div.footer--2dyxG > div.buttonsPonyMode--2zujD > div:nth-child(1) > div > button'). Закинул в manifest.json вот этот код:

{
  "manifest_version": 2,
  "name": "Доменное предупреждение",
  "version": "1.0",
  "description": "Предупреждение о попытке отправки сообщения на сторонний домен",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["https://e.mail.ru/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

И закинул это все в расширение google chrome. Но ничего не происходит при попытке отправить письмо на чужой домен. Как можно определить что ему не хватает?

[Aetae]

run_at лучше "document_start".

Селекторы содержащие всякие 2dyxG и 2zujD - это плохо, данные кракозябры - это сгенерированые имена, они точно изменятся при следующем обновлении со стороны сайта и у вас всё перестанет работать.
Селекторы содержащие :nth-child() - тоже не очень хорошо, порядок может поменяться в любой момент.
Желательно найти какие-то более-менее статические и уникальные условия к которым можно привязаться.

Консоль в браузере открывается по f12. Туда можете вставить код и исполнить. И весь и чисто получение по селектору.

Больше можно сказать только зайдя на мыло mail(которого у меня нет) и проверив всё руками. М.б. кто-то другой с этим вам поможет или сами разберётесь.
Понаставьте везде console.log и следите что там при клике.

[kocmohabt228]

Спасибо огромное. Упустил ваше решение из виду. Вот немного исправленный рабочий код, вдруг кому-нибудь повезет заниматься таким же.

{
  const org = '@вашдомен';

  addEventListener('click', (event) => {
	const isSendButton = event.target.closest('[tabindex="570"]');
    if (!isSendButton) return;
	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];

    if (email.indexOf(org) === -1) {
      const isConfirmed = confirm('Отправить на чужой домен?');
	  if (isConfirmed) return;
	} else {
 	  return;
	}	
    event.preventDefault()
    event.stopImmediatePropagation()
    event.stopPropagation()
	
  }, true);
}