如何挂钩jquery表单在Chrome扩展中提交 [英] How to hook jquery form submit in Chrome extension
问题描述
我使用扩展名为chrome的简单内容脚本来捕获所有表单提交。它通过按钮提交时触发（请参阅代码），但在jquery调用时不起作用。它应该工作不能理解什么是错的。
content.js
---------
jQuery（form）。submit（function（）{
alert（'submit hooked !:'+ $（this）.serialize（））;
}）;
$ b code> page.html
--------
< html>
< head>
< script type =text / javascriptsrc =jquery-1.8.2.min.js>< / script>
< script language =JavaScript>
函数foo（）{
jQuery（＃some_form）。submit（）;
函数foo_native（）{
document.getElementById（'some_form'）。submit（）;
}
< / script>
< / head>
< body>
< form action =http://example.com/handlerid =some_form>
您的名字：< input type =textname =name>< br>
您的电子邮件：< input type =textname =email>< br>
<！ - 这个挂钩 - >
< input type =submitvalue =发送简单提交>< br>
<！ - 钩子不能用于这种呼叫 - >
< input type =buttonvalue =发送jquery提交onclick =foo（）>< br>
< input type =buttonvalue =发送本地提交onclick =foo_native（）>
< / form>
< br>
< / body>
< / html>
背景
这与提交事件的工作方式有关。你可以在这里测试 onsubmit 事件：
http://jsfiddle.net/sirhc/VueEJ/
这种行为是由于历史原因而设计的，如在W3C邮件列表。
要解决此问题，您可能必须覆盖原始提交方法。为此，您必须将javascript注入页面，因为内容脚本无法访问内容窗口中的本地变量。
解决方案
我的解决方案包括监听文档中的 submit 事件以进行常规表单提交，同时注入提交处理程序以手动触发<$ c
请注意，这里的JavaScript方法利用了浏览器是现代DOM兼容的事实浏览器。这里的一些方法在IE 8及以下版本中不可用，但这很好，因为此代码适用于Chrome扩展。我也建议不要使用jQuery并编写自己的序列化方法。
虽然没有要求，但我也提交了处理程序尊重 event.preventDefault（） 。
content.js
document.addEventListener（submit，function（e）{
alert（'submit hooked !:'+ $（e.target）.serialize（））;
}，false）;
//记住把它改成相对路径来注入inject.js
injectScript（chrome.extension.getURL（/），inject.js）;
函数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文件注入到页面中。
参考文献
- http://briancrescimanno.com/2009/05/14/form-submit-method-doesnt-fire -submit-event-workaround /
- https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events
- http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element /
- http://paulirish.com/2011/surefire-dom-element-insertion/
- http://developer.chrome.com/extensions /manifest.html#web_accessible_resources
I have simple content script in chrome extension to catch all forms submits. It works when submit triggered by button (see code) but not when called by jquery. It should work can't understand whats 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>
Background
This is related to the way that the submit event works. You can test out the onsubmit event on a fiddle here:
http://jsfiddle.net/sirhc/VueEJ/
This behavior is by design due to historical reasons as described here in the W3C mailing list.
To workaround this, you may have to overwrite the native submit method. And to do so, you have to inject javascript onto the page as content scripts are unable to access the local variables in the content window.
Solution
My solution involves listening to the submit event on the document for normal form submits while also injecting a submit handler for to manually trigger submit events on the page.
Note that the JavaScript methods here make use of the fact that the browser is a modern DOM compatible browser. Some methods here are not available in IE versions 8 and below, but that is fine because this code is meant for use in a Chrome Extension. May I also suggest not using jQuery and writing your own serialize method.
Although not requested, I also made submit handler respect 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 (to be added, this is not the entire file)
"web_accessible_resources": [ "inject.js" ]
The addition to the manifest allows the inject.js JavaScript file to be injected to the page.
References
- http://briancrescimanno.com/2009/05/14/form-submit-method-doesnt-fire-submit-event-workaround/
- https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events
- http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/
- http://paulirish.com/2011/surefire-dom-element-insertion/
- http://developer.chrome.com/extensions/manifest.html#web_accessible_resources
这篇关于如何挂钩jquery表单在Chrome扩展中提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
