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

Question

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

据我所知，您不能强制按任何顺序触发 onClick 处理程序，因此我不能只使用 jQuery 的 .click() 添加新的 onClick 事件(b/c 有一个默认操作将在我的之前被触发的可能性)。

我一直在试验许多其他方法——所有这些方法都让我失望了。考虑到 Chrome 的 isolated worlds，我正在尝试做什至可能的事情？

以下是我采用的对我不起作用的方法:

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

注意:这些方法中的一种完全有可能应该有效，但错误阻止了它的工作。如果是这种情况，请告诉我!

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 制定了这些安全措施是有原因的，所以请非常小心地使用它。