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

Question

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

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

页：

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>

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

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-10-23 18:59:11

背景

解

content.js

inject.js

manifest.json（要添加，这不是整个文件）

参考

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-10-23 18:59:11

背景

解

content.js

inject.js

manifest.json（要添加，这不是整个文件）

参考

解决方案1
4 已采纳 2012-10-23 18:59:11