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

Question

I have simple content script in chrome extension to catch all forms submits. 我在chrome扩展中有简单的内容脚本来捕获所有表单提交。 It works when submit triggered by button (see code) but not when called by jquery. 它在按钮触发提交时有效（参见代码），但在由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>

Answer 1

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/ 您可以在这里测试onsubmit事件： http ： //jsfiddle.net/sirhc/VueEJ/

This behavior is by design due to historical reasons as described here in the W3C mailing list . 由于历史原因，此行为是设计的，如W3C邮件列表中所述。

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. 为此，您必须将javascript注入页面，因为内容脚本无法访问内容窗口中的本地变量。

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. 我的解决方案涉及在正常表单提交的文档上侦听submit事件，同时还注入一个提交处理程序，以手动触发页面上的submit事件。

Note that the JavaScript methods here make use of the fact that the browser is a modern DOM compatible browser. 请注意，这里的JavaScript方法利用了浏览器是现代DOM兼容浏览器的事实。 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. 此处的某些方法在IE 8及更低版本中不可用，但这很好，因为此代码适用于Chrome扩展程序。 May I also suggest not using jQuery and writing your own serialize method. 我还建议不要使用jQuery并编写自己的序列化方法。

Although not requested, I also made submit handler respect event.preventDefault() . 虽然没有请求，但我也提交了处理程序尊重event.preventDefault() 。

content.js 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 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)* manifest.json（要添加，这不是整个文件）

"web_accessible_resources": [ "inject.js" ]

The addition to the manifest allows the inject.js JavaScript file to be injected to the page. 对清单的添加允许将inject.js JavaScript文件注入页面。

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

问题描述

1 个解决方案

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

Background 背景

Solution 解

content.js content.js

inject.js inject.js

manifest.json (to be added, this is not* the entire file)* manifest.json（要添加，这不是整个文件）

References 参考

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

问题描述

1 个解决方案

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

Background 背景

Solution 解

content.js content.js

inject.js inject.js

manifest.json (to be added, this is not the entire file) manifest.json（要添加，这不是整个文件）

References 参考

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

manifest.json (to be added, this is not* the entire file)* manifest.json（要添加，这不是整个文件）