All geek questions in one place

How to enable jquery form form in Chrome extension

I have simple script content in chrome extension to catch all forms. It works when submit is triggered by a button (see Code), but not when jquery is called. He must work, he cannot understand what is wrong.

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

page:

 page.html -------- <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script language="JavaScript"> function foo() { jQuery("#some_form").submit(); } function foo_native() { document.getElementById('some_form').submit(); } </script> </head> <body> <form action="http://example.com/handler" id="some_form"> Your name:<input type="text" name="name"><br> Your email:<input type="text" name="email"><br> <!-- This hooked --> <input type="submit" value="Send simple submit"><br> <!-- Hook not working for such calls --> <input type="button" value="Send jquery submit" onclick="foo()"><br> <input type="button" value="Send native submit" onclick="foo_native()"> </form> <br> </body> </html>
+4
source share
1 answer

Background

This is due to how the send event works. You can check the onsubmit event on the fiddle here: http://jsfiddle.net/sirhc/VueEJ/

This behavior is due to historical reasons described here on the W3C mailing list .

To get around this, you may need to overwrite your own submit method. And for this you need to add javascript to the page, as content scripts will not be able to access local variables in the content window.

Decision

My solution includes listening to the submit event in the document for a normal form, as well as entering a submit handler to manually fire submit events on the page.

Please note that the JavaScript methods here use the fact that the browser is a modern DOM-compatible browser. Some methods are not available here in versions of IE 8 and lower, but this is great because this code is intended for use in the Chrome extension. May I also suggest not using jQuery and writing my own serialization method.

Despite the fact that I was not requested, I also drew the sender's attention to sending 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 (added, this is not the whole file)

 "web_accessible_resources": [ "inject.js" ]

Adding a manifest allows you to insert the inject.js JavaScript file into the page.

References

+2
source

Source: https://habr.com/ru/post/1441619/

More articles:


All Articles