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/

由于here in the W3C mailing list所述的历史原因，此行为是设计使然。

要解决此问题，您可能必须覆盖本机提交方法。要做到这一点，你必须在页面上注入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 个答案:

背景

解决方案

content.js

inject.js

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

参考