如何在Chrome扩展程序中挂钩jquery表单提交

我在chrome扩展中有简单的内容脚本来捕获所有表单提交。 当按钮触发提交时（参见代码），但是当由jquery调用时，它不起作用。 它应该工作无法理解什么是错的。

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

页：

 page.html --------     function foo() { jQuery("#some_form").submit(); } function foo_native() { document.getElementById('some_form').submit(); }    
 Your name:
 Your email:
  
  
  
 
   

Answer 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文件注入页面。

参考

• 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