Перехват отправки формы в расширении содержимого Chrome

Question

Я бы хотел перехватить отправку формы на определенном веб-сайте.Форма не имеет идентификатора, но у нее есть имя.Я бы предпочел не использовать jQuery, так как мое расширение очень легкое и не имеет зависимостей.Форма отправляется не кнопкой, а методом submit ().

Я думал, что смогу просто обработать событие onSubmit, но, похоже, оно не вызывается.

СейчасЯ в тупике, есть идеи?

Answer 1

Вы можете поймать свою форму с помощью

var myForm = document.getElementsByName('myForm');

, которая возвращает nodeList (аналогично Array).Затем вы можете переопределить событие submit двумя способами:

myForm.onsubmit = function (evt) {...};

или

myForm.addEventListener('submit', function (evt) {...});

Будьте осторожны, используйте только строчные буквыбуквы для названия события.Во втором примере вы можете привязать несколько слушателей к событию, но оно не поддерживается старыми браузерами (

Пример:

html:

<form name="myForm" action="#" method="post">
    <input type="submit" value="Send">
</form>

js:

var myForm;

myForm = document.getElementsByName('myForm')[0];

myForm.onsubmit = function (evt) {
    // Do things here before passing on or stop the submit
};

Answer 2

В моем content.html:

var patch = document.createElement('script');  
patch.src= chrome.extension.getURL('patch.js')
document.body.appendChild(patch);

document.forms['logoutForm'].onsubmit = function() {
        chrome.extension.sendRequest({logout: true});
}

В patch.js:

document.logoutForm.submitOrig = document.logoutForm.submit;

document.logoutForm.submit = function() {

    this.onsubmit();

    this.submitOrig();

};