Расширение Chome: как изменить поведение кнопки внутри страницы?

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

Для кнопки наиболее вероятным событием, которое необходимо перехватить, является click< /a>, но вам может понадобиться перехватывать другие события, такие как mousedown или mouseup.

Для других типов входных элементов, конечно же, существует множество других возможных событий. Например, Stack Exchange прослушивает input, < a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown" rel="nofollow noreferrer">keydown и keypress для получения входных данных в пределах textareas.

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

1. Эксперимент: попробуйте наиболее вероятное событие или комбинацию событий и посмотрите, что произойдет, или
2. Посмотрите на код страницы, чтобы определить, к каким обработчикам событий прикреплены.

Очевидно, вы, вероятно, решите использовать stopImmediatePropagation(), stopPropagation() и/или preventDefault() для предотвращения уже существующий обработчик событий от вызова.

HTML кнопки может измениться в будущем

Что касается вашего беспокойства по поводу того, что HTML-код страницы может измениться: Да, это может быть. Это может сломать ваше расширение. Затем вам нужно будет обновить расширение. Если вы можете определить точные селекторы, которые используются кодом для страницы, вы можете попытаться использовать те же самые селекторы. Это наименее вероятные вещи, которые нужно изменить, поскольку дизайнеру веб-страницы также потребуется изменить свой код. Но, в конечном счете, вам просто нужно смириться с тем фактом, что HTML может измениться. Хотя вы можете попытаться смягчить последствия таких изменений, вы ничего не можете сделать, чтобы полностью устранить свою зависимость от HTML страницы, с которой вы пытаетесь взаимодействовать.

Поскольку календарь представляет собой одностраничное приложение, я не знаю, в какой момент искать кнопку в DOM.

Правильное время для поиска кнопки в DOM будет зависеть от конкретной страницы, с которой вы пытаетесь взаимодействовать. Существует несколько потенциальных событий, которые вы можете использовать, чтобы определить, когда добавлять обработчики событий, в том числе, как минимум, DOMContentLoaded, load< /a> и readystatechange. Однако вы можете выполнить этот поиск во время click или другого события. Это требует немного больше ресурсов процессора, поэтому рекомендуется делать это только до тех пор, пока вы не найдете элемент, который хотите просмотреть (т. е. когда вы его найдете, запомните его).

Может даже потребоваться добавить вашего основного слушателя в window перед загрузкой любого содержимого страницы. Это может понадобиться, когда слушатели страницы привязаны к window. Обработчик, добавленный первым, вызывается первым. В качестве расширения вы можете убедиться, что ваш сценарий содержимого запускается до загрузки любого содержимого страницы. Это позволяет вам быть уверенным, что ваш обработчик вызывается первым.

Фактический перехват события:
Ваша цель – вызвать обработчик до обработчика, который находится в сценариях страницы. Не зная, на каком элементе фактически размещен прослушиватель событий (это может быть любой предок элемента или сам элемент), и если он помещен в Фаза захвата, таргетинга или всплытия, наиболее вероятным способом сделать так, чтобы обработчик вызывался первым, является размещение его на window в фазе захвата. Возможно, вам потребуется, чтобы ваш сценарий запускался до загрузки любого содержимого, чтобы ваш обработчик был первым, добавленным в window для этого типа события. Однако, как правило, не требуется обязательного запуска перед загрузкой какого-либо контента.

Для конкретного случая, который вас интересовал, кнопка «Создать» в Календаре Google, идентификатор для <div>, содержащего кнопку, равен createEventButtonContainer. Таким образом, вы можете сделать что-то вроде (вы не можете использовать jQuery, так как он выполняет только фазу Bubbling):

//The following will catch the event prior to almost all other possible
//  event handlers.
var createEventButtonContainerEl;
window.addEventListener('click',function(e){
    if(!createEventButtonContainerEl){
        //If we have not previously found the create event button container, try to find it.
        createEventButtonContainerEl=document.getElementById('createEventButtonContainer');
    }
    if(createEventButtonContainerEl && createEventButtonContainerEl.contains(e.target)){
        //The elements we are interested in
        e.stopImmediatePropagation();
        e.preventDefault();
        //You may want to further determine which part of the `createEventButtonContainer`
        //  was clicked as different parts have different functions.
    }
}

Вы можете получить кнопку с помощью функции $() в jQuery. Чтобы получить кнопку, они не дают 100% гарантии ни в коем случае. И добавьте прослушиватель событий в конце загрузки страницы. Таким образом, вы уверены, что страница загружена полностью.