如何在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