Расширение для Яндекс браузера

[Ципихович Эндрю]

здравствуйте, нужно написать расширение, сценарий такой, захожу на https://mail.yandex.ru
жму кнопку "написать", для начала нужно отловить это событие, сейчас у меня в джава скрипте, то что навяало мне по моему запросу джипити:

// Ждём загрузки DOM
        document.addEventListener('DOMContentLoaded', () => {
        const writeButton = document.querySelector('.compose-button'); // Замените селектор на правильный
        if (writeButton) {writeButton.addEventListener('click', () => {
            alert('Кнопка "Написать" нажата!');});}
        else
            {alert('Кнопка "Написать" не найдена!');}
        });

не работает, более всего напрягает, то что я говорю джипити, что я не знаю нужный селектор, а он талдычит мне - Замените селектор на правильный, а ведь хочу, чтобы расширение это само нашло тем более, что со временем его имя может измениться))
пока получаю алерт "Кнопка "Написать" не найдена!", ноя ведь её вижу и нажимал, как подправить? спасибо

[Arigato]

Сообщение от Ципихович Эндрю

я не знаю нужный селектор

Ну так в чем проблема его узнать? В браузере F12, там все есть...

[Ципихович Эндрю]

Сообщение от Arigato

Ну так в чем проблема его узнать? В браузере F12, там все есть...

это клик ПКМ на кнопке "Написать" и выбрать из меню "Исследовать элемент"
а потом в меню выбрать "Копировать элемент" и будет скопировано:

<a href="#compose" class="Button2 Button2_type_link Button2_view_action Button2_size_m ComposeButton-m__containerContent--sPX6v" aria-disabled="false" role="button"><span class="ComposeButton-m__btnText--ZnUxS">Написать</span></a>

то есть кнопка с class'ом ComposeButton-m__btnText--ZnUxS?
то есть будет:

// Ждём загрузки DOM
        document.addEventListener('DOMContentLoaded', () => {
        const writeButton = document.querySelector('ComposeButton-m__btnText--ZnUxS'); // Заменён селектор на правильный
        if (writeButton) {writeButton.addEventListener('click', () => {
            alert('Кнопка "Написать" нажата!');});}
        else
            {alert('Кнопка "Написать" не найдена!');}
        });

так?
опробовал, пока
alert('Кнопка "Написать" не найдена!')

[Arigato]

Во-первых, у вас там не кнопка, а ссылка. Потому лучше обработчик вешать на ссылку, а не на внутренний элемент span. Во-вторых, имя класса должно начинаться с точки.

[Ципихович Эндрю]

Arigato, спасибо за ответ, ОК, изменил:

// Ждём загрузки DOM
        document.addEventListener('DOMContentLoaded', () => {
        const writeButton = document.querySelector('.ComposeButton-m__containerContent--sPX6v'); // Заменён селектор на правильный
        if (writeButton) {writeButton.addEventListener('click', () => {
            alert('Кнопка "Написать" нажата!');});}
        else
            {alert('Кнопка "Написать" не найдена!');}
        });

НЕ помогло))

[uberchel]

Держи.
querySelector - поддерждивает css правила.

       document.addEventListener('DOMContentLoaded', () => {
          //оба варианта рабюочие
          const writeButton = document.querySelector('a[href="#compose"]');
          //const writeButton = document.querySelector('span[class^="ComposeButton-m__btnText"]');
          if (writeButton) {
              writeButton.addEventListener('click', (e) => {
                alert('Кнопка "Написать" нажата! ' + e.target.tagName);
            });
           }
        });

[Ципихович Эндрю]

Сообщение от uberchel

оба варианта рабюочие

увы нет, оба опробовал - не работают, такие дела...........

[uberchel]

Сообщение от Ципихович Эндрю

увы нет, оба опробовал - не работают, такие дела...........

Значит проблема в другом, как варианты: кнопка создается динамически после загрузки документа, кнопка находится в iframe или еще что то, а так код технически верен

[Arigato]

Значит проблема где-то в другом месте. Например, данной кнопки может и не быть по загрузке документа, кнопка может появиться позже. А значит надо с помощью MutationObserver отловить момент создания этой кнопки.

[Arigato]

Сообщение от uberchel

Значит проблема в другом

Сообщение от Arigato

Значит проблема где-то в другом месте

...