Выполните пользовательское действие onClick перед действием по умолчанию веб-приложения в расширении Chrome

Question

Я создаю расширение Chrome, которое будет взаимодействовать с существующим веб-приложением. Мне нужно выполнить действие, когда пользователь нажимает «кнопку» в существующем приложении перед «встроенными» или «стандартными» действиями приложения (кнопка на самом деле <div> с присоединенными событиями JS onClick).

Насколько я знаю, вы не можете принудительно запускать обработчики onClick в любом порядке, поэтому я не могу просто использовать .click () jQuery, чтобы добавить новое событие onClick (b / c есть вероятность того, что действие по умолчанию будет запущено раньше моего).

Я экспериментировал с рядом других подходов - все они провалились. Возможно ли то, что я пытаюсь сделать, учитывая изолированные миры Chrome ?

Вот подходы, которые я использовал, которые не сработали для меня:

1. Решение: Удалите все обработчики щелчков, кроме моего, а затем запустите другие обработчики после того, как я завершу свое действие
   Проблема : Я не смог получить список существующих обработчиков кликов
2. Решение: Скройте кнопку по умолчанию <div> и поместите вместо нее мою кнопку. После того, как событие click запущено на моем, покажите существующую кнопку, а затем запустите событие на оригинале (думаю, мне нужно показать его, прежде чем я смогу запустить событие?)
   Проблема: кнопка не отвечает на событие, которое я создал.
3. Решение: До того, как мои действия будут выполняться в фоновом режиме через равные промежутки времени, поэтому почти гарантированно завершится к тому времени, когда пользователь нажмет кнопку.
   Проблема: это форматирует текст на экране, который я бы предпочел не форматировать, пока пользователь не нажмет кнопку, он может пропустить некоторое форматирование, основанное на таймере опроса и т.д ...

Примечание: вполне возможно, что один из этих подходов сработал, но ошибка помешала ему работать. Если это так, пожалуйста, дайте мне знать!

Answer 1

Я экспериментировал с этим некоторое время, и обнаружил интересный факт: Chrome предоставляет скрипты контента отдельную модель DOM для использования (что, конечно, разумно). Обработчики событий, которые вы определяете для любого элемента, запускаются ПОСЛЕ события по умолчанию. Я бы сказал, что нет никакого способа обойти это, но я нашел хороший, немного, несколько «хакерский» способ сделать это:

var removeClickHandler = function(){
    // If you MUST use jQuery I would
    // suggest doing it in a closed scope
    // so that it doesn't interfere with anything
    // else using either 'jQuery' or '$', like this:
    /*
        (function(){
            [...Insert jQuery 1.5.5 here...]
            var target = $("#myTargetElement");
            target.unbind("click");
            target.bind("click", function(){
                alert("HAHA! What then??!! Its MY CLICK HANDLER NOW!!");
            });
        })();
    */
    // Otherwise, use plain JS...but using a closed scope is
    // still a good idea, for example, this keeps 'target' from leaking out:
    (function(){
        var target = document.getElementById("#myTargetElement");
        target.onclick = function(){
            alert("HAHA! What then??!! Its MY CLICK HANDLER NOW!!");
        };
    })();
};

window.location = "javascript: ("+removeClickHandler+")();";

Помните, что Chrome ввел эти меры безопасности по причине , поэтому будьте ОЧЕНЬ осторожны при использовании этого.

Answer 2

Спасибо за мысли, ребята. Я попробовал оба этих решения, и они, вероятно, сработали бы, если бы не сложность веб-приложения, с которым я имею дело (GMail). Мне было трудно определить, какие входные данные были у обработчика щелчков по умолчанию (и, следовательно, как их воссоздать).

Вместо этого я пошел с этим решением (оно не идеально, но оно выполняет свою работу):

1. При загрузке страницы я скрываю существующую кнопку и вместо нее добавляю свою
2. Когда пользователь нажимает мою кнопку, я выполняю свое действие, затем скрываю свою кнопку, затем показываю кнопку по умолчанию
3. Я слушаю события onFocus на затронутых полях. Если пользователь возвращается в поля, которые я уже обработал, я отменяю свою обработку, снова показываю свою кнопку и скрываю кнопку по умолчанию
4. При необходимости повторите шаги 2-3

Конечный результат заключается в том, что пользователю необходимо дважды нажать кнопку, один раз для «Подготовить» и один раз для «Отправить».

Если кому-то посчастливится заставить работать другие решения (по кнопке Отправить в GMail), дайте мне знать, и я обновлю выбранный ответ.

Answer 3

Допустим, этот элемент находится на сайте:

<div id="test" onclick="originalHandler()">test</div>

<script>
function originalHandler() {
    alert("original");
}
</script>

Тогда в скрипте контента я могу сделать:

var el = document.getElementById("test");
var oldEvent = el.onclick;
el.onclick = myHandler;

function myHandler() {
    alert("mine");

    //run original
    oldEvent();
}