Question

我正在构建一个Chrome扩展程序，该扩展程序将与现有的Web应用程序进行交互。我需要在用户在应用程序的“内置”或“默认”操作之前按下现有应用程序上的“按钮”时执行操作（该按钮实际上是附加了JS onClick事件的<div>）。

据我所知，你不能强迫onClick处理程序以任何顺序触发，所以我不能只使用jQuery的.click（）添加一个新的onClick事件（b / c有一个在我之前将触发默认操作的可能性）。

我一直在尝试其他一些方法 - 所有这些都让我失望。鉴于Chrome的isolated worlds？

，我正在尝试做什么

以下是我采用的方法对我没用：

解决方案：删除除我的所有点击处理程序，然后在我完成操作后解雇其他处理程序
问题：我无法获取现有点击处理程序的列表
解决方案：隐藏默认的<div>按钮，然后将我的按钮放在那里。在我的触发点击事件后，显示现有按钮，然后在原始事件上触发事件（我猜我需要先显示它才能触发事件？）问题： 按钮没有响应我创建的事件。
解决方案：在我在后台定期执行操作之前，几乎可以确保在用户按下按钮时完成操作。
问题：它格式化屏幕上的文字，我宁愿不格式化，直到用户按下按钮，它可能会错过基于轮询计时器等的一些格式...

注意：完全有可能这些方法之一应该有效，但是一个bug阻止它工作。如果是这种情况，请告诉我！

Answer 1

我已经尝试了一段时间了，我发现了一个有趣的事实：Chrome为内容脚本提供了一个单独的DOM来使用（当然，它很聪明）。您为任何元素定义的事件处理程序在默认事件之后运行。我会说没有办法解决这个问题，但我找到了一个很好的，有点“有些”hacky“的方法来做到这一点：

var removeClickHandler = function(){
    // If you MUST use jQuery I would
    // suggest doing it in a closed scope
    // so that it doesn't interfere with anything
    // else using either 'jQuery' or '$', like this:
    /*
        (function(){
            [...Insert jQuery 1.5.5 here...]
            var target = $("#myTargetElement");
            target.unbind("click");
            target.bind("click", function(){
                alert("HAHA! What then??!! Its MY CLICK HANDLER NOW!!");
            });
        })();
    */
    // Otherwise, use plain JS...but using a closed scope is
    // still a good idea, for example, this keeps 'target' from leaking out:
    (function(){
        var target = document.getElementById("#myTargetElement");
        target.onclick = function(){
            alert("HAHA! What then??!! Its MY CLICK HANDLER NOW!!");
        };
    })();
};

window.location = "javascript: ("+removeClickHandler+")();";

请记住，Chrome出于某种原因设置了这些安全措施，所以请您非常小心地使用它。

Answer 2

让我们说这个元素在一个网站上：

<div id="test" onclick="originalHandler()">test</div>

<script>
function originalHandler() {
    alert("original");
}
</script>

然后在内容脚本中我可以这样做：

var el = document.getElementById("test");
var oldEvent = el.onclick;
el.onclick = myHandler;

function myHandler() {
    alert("mine");

    //run original
    oldEvent();
}

Answer 3

谢谢你的想法。我尝试了这两种解决方案，如果不是因为我正在处理的Web应用程序（GMail）的复杂性，它们可能会有效。我很难确定默认点击处理程序的输入是什么（以及如何重新创建它们）。

相反，我选择了这个解决方案（它不完美，但它完成了工作）：

在页面加载时，我隐藏现有按钮并添加我自己的按钮
当用户点击我的按钮时，我执行操作，然后隐藏我的按钮，然后显示默认按钮
我在受影响的字段上侦听onFocus事件。如果用户返回我已经处理的字段，那么我撤消我的处理，再次显示我的按钮并隐藏默认按钮
根据需要重复步骤2-3

最终结果是用户需要单击按钮两次，一次“准备”，一次“发送”。

如果有任何人有任何其他解决方案可以运气（在GMail的发送按钮上）让我知道，我会更新所选答案。

在Chrome扩展程序中的网络应用默认操作之前执行自定义onClick操作

3 个答案: