Нажатие кнопки на веб-странице, добавленной расширением Chrome

Question

Я использую расширение Chrome, которое динамически добавляет новую кнопку на веб-страницу.Расширение работает нормально, но для запуска необходимо, чтобы человек нажал кнопку добавления на веб-странице.Я пытаюсь создать расширение, которое автоматически нажимает кнопку.

Я пробовал приведенный ниже код, но, похоже, он не работает.Он взаимодействует с веб-страницей вокруг него, но не с добавленной кнопкой.

* Чтобы было ясно, я не пытаюсь нажать кнопку внутри всплывающего окна расширения.Это расширение добавляет кнопку к HTML-страницам при загрузке страницы.

$("#button-id").click()

document.getElementsByClassName("class-name")[0].click()

document.getElementById("button-id").click()

Если я позвоню

document.getElementById("button-id")

, он возвращает:

<button class=​"button-class" tabindex=​"0" title=​"Button Title" id=​"button-id">​</button>​

, поэтому консольвидит кнопку, но функция щелчка ничего не вызывает.

Answer 1

Полагаю, ваш JS-файл вызывается до запуска файла расширений, то есть кнопка еще не была добавлена ​​в DOM при выполнении кода.

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

var buttonTrigger = setInterval( function() {
    var buttonElement = document.getElementById( 'button-id' );
    if ( buttonElement ) {

        var eventType = 'click'; // click | mousedown | mouseup | mouseover ..
        var eventObject = document.createEvent( 'MouseEvents' );
            eventObject.initEvent( eventType, true, false );

        buttonElement.dispatchEvent( eventObject );

        clearInterval( buttonTrigger );
    }
}, 100 );

Это будет повторяться каждые 100 мс, пока кнопка не будет найдена, и вызовет событие щелчка.

Рабочий пример: https://jsfiddle.net/zkyfv1wj/

Другая возможность заключается в том, что расширение не прослушивает событие нажатия, а mousedown или mouseup. Чтобы вызвать их, просто измените переменную eventType.

¯ \ _ (ツ) _ / ¯

Answer 2

Исходя из собственного поведения целевого элемента, которого вы хотели бы достичь, вы можете или не можете использовать его программно созданные события.Например, если вы хотите инициировать щелчок - просто создайте событие мыши и отправьте его на целевой узел:

const clickEvent = new MouseEvent('click');
const targetNode = document.getElementById('xxx');
targetNode.dispatch(clickEvent);

Некоторые нативные действия не могут быть вызваны такими событиями, созданными вручную.Например, собственный выбор нельзя открыть, так как для отправляемого события должно быть установлено значение isTrusted, равное true, а при ручном создании оно будет установлено равным false, а для дескриптора свойства configurable также установлено значение false.