Как подключить форму формы jquery в расширении Chrome

У меня есть простой контент script в chrome extension, чтобы поймать все формы. Он работает, когда submit запускается кнопкой (см. Код), но не при вызове jquery. Он должен работать, не может понять, что не так.

content.js
---------
jQuery("form").submit(function() {
 alert('submit hooked!: ' + $(this).serialize());
});

страница:

page.html
--------
 
 
 
 
 <form action="http://example.com/handler" id="some_form">
 Your name:
 Your email:
 <!-- This hooked -->
 
 <!-- Hook not working for such calls -->
 
 
 </form>
1 ответ

Фон

Это связано с тем, как работает событие отправки. Вы можете проверить событие onsubmit на скрипке здесь: http://jsfiddle.net/sirhc/VueEJ/

Это поведение обусловлено историческими причинами, описанными здесь, в списке рассылки W3C.

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

Решение

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

Обратите внимание, что методы JavaScript здесь используют тот факт, что браузер является современным совместимым с DOM браузером. Некоторые методы здесь недоступны в версиях IE 8 и ниже, но это прекрасно, потому что этот код предназначен для использования в расширении Chrome. Могу ли я также предложить не использовать jQuery и написать собственный метод сериализации.

Несмотря на то, что я не был запрошен, я также обратил внимание отправителя на отправку event.preventDefault().

content.js

document.addEventListener("submit", function (e) {
 alert('submit hooked!: ' + $(e.target).serialize());
}, false);
// Remember to change this to the relative path to inject.js
injectScript( chrome.extension.getURL( "/" ), "inject.js" );
function injectScript ( aBasePath, aScriptURL ) {
 var scriptEl = document.createElement( "script" );
 scriptEl.src = aBasePath + aScriptURL;
 scriptEl.async = false;
 (document.body || document.head || document.documentElement)
 .appendChild( scriptEl );
}

inject.js

HTMLFormElement.prototype._nativeSubmit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function () {
 var submitEvent = document.createEvent("HTMLEvents");
 submitEvent.initEvent("submit", true, true);
 if (this.dispatchEvent(submitEvent)) {
 this._nativeSubmit.apply(this, arguments);
 }
};

manifest.json(добавляется, это не весь файл)

"web_accessible_resources": [ "inject.js" ]

Добавление манифеста позволяет вставить файл inject.js JavaScript на страницу.

Ссылки

licensed under cc by-sa 3.0 with attribution.