gpt4 book ai didi

javascript - 如何在 Chrome 扩展中 Hook jquery 表单提交

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:49:07 25 4
gpt4 key购买 nike

我在 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>

最佳答案

背景

这与提交事件的工作方式有关。您可以测试 onsubmit fiddle 事件在这里: http://jsfiddle.net/sirhc/VueEJ/

此行为是由于历史原因而设计的 here in the W3C mailing list .

要解决此问题,您可能必须覆盖 native 提交方法。为此,您必须将 javascript 注入(inject)页面,因为内容脚本无法访问内容窗口中的局部变量。

解决方案

我的解决方案涉及收听 submit文档上的事件用于正常表单提交,同时还注入(inject)提交处理程序以手动触发 submit页面上的事件。

请注意,此处的 JavaScript 方法利用了浏览器是现代 DOM 兼容浏览器这一事实。此处的某些方法在 IE 版本 8 及以下版本中不可用,但这很好,因为此代码旨在用于 Chrome 扩展程序。我还可以建议不要使用 jQuery 并编写您自己的序列化方法。

虽然没有要求,但我也让提交处理程序尊重event.preventDefault() .

内容.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" ]

list 的添加允许 inject.js要注入(inject)页面的 JavaScript 文件。

引用资料

关于javascript - 如何在 Chrome 扩展中 Hook jquery 表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13036644/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com