Question

我很确定这是一个愚蠢的问题，但我很难找到有用的答案。

我想抓住用户在Google日历中创建新活动以执行某些操作。所以我想我可以通过修改“创建”按钮的行为来做到这一点。

使用jQuery获取按钮并添加事件监听器将是一个好习惯吗？我并不完全赞同这种方法，因为

按钮的HTML可能会在将来发生变化
由于日历是单页应用，我不知道在DOM中搜索按钮的合适时机

提前致谢！

Answer 1

如果要更改按钮的行为，则需要注入一个内容脚本，该脚本可以在当前处理程序之前访问按钮上的事件。你是如何做到这一点的，以及你需要拦截的事件因情况而异。

对于按钮，您需要拦截的最可能事件是click，但您可能需要拦截其他事件，例如mousedown或mouseup。

对于其他类型的输入元素，当然还有多个其他可能的事件。例如，Stack Exchange侦听input，keydown和keypress事件以获取textareas内的输入。

实际确定需要截取哪些事件的唯一方法是

实验：尝试最可能的事件或事件组合，看看会发生什么，或
查看页面的代码以确定处理程序附加的事件。

显然，您可能会选择使用stopImmediatePropagation()，stopPropagation()和/或preventDefault()来阻止调用现有的事件处理程序。

按钮的HTML可能会在将来发生变化

至于您担心页面的HTML可能会发生变化：是的，它可能会发生变化。这可能会破坏你的扩展。然后，您需要更新您的扩展程序。如果您可以确定页面代码使用的确切选择器，则可以尝试使用相同的选择器。这些是最不可能改变的东西，因为它需要网页的设计者也改变他们的代码。但是，最终，您必须忍受HTML可能会发生变化的事实。虽然您可以尝试减轻此类更改可能带来的影响，但您无法完全删除对您尝试与之交互的页面的HTML的依赖关系。

由于日历是单页应用程序，我不知道在DOM中搜索按钮的正确时机

在DOM中搜索按钮的正确时间取决于您尝试与之交互的特定页面。您可以使用多个潜在事件来确定何时添加事件处理程序，这些事件至少包括DOMContentLoaded，load和readystatechange。但是，您可以选择在click或其他事件发生时进行此搜索。这需要更多的CPU资源，因此建议只有这样才能找到您想要观看的元素（即一旦找到，请记住该元素）。

甚至可能需要在加载任何页面内容之前将主要侦听器添加到window。当页面的侦听器附加到window时，可能需要这样做。首先添加的处理程序首先被调用。作为扩展，您可以选择确保在加载任何页面内容之前运行内容脚本。这样做可以确保首先调用您的处理程序。

实际拦截事件：
您的目标是在页面脚本中的处理程序之前调用您的处理程序。不知道事件监听器实际放置在哪个元素上（它可能在元素的任何祖先或元素本身上），如果它放在Capture, Target, or Bubbling phase上，那么你最有可能的方式首先调用您的处理程序是将其放在Capture阶段的window。您可能需要在加载任何内容之前运行脚本，以便处理程序是第一个为此类事件添加到window的处理程序。但是，通常不需要确保在加载任何内容之前运行。

对于您感兴趣的特定情况，Google日历中的“创建”按钮，包含该按钮的<div>的ID为createEventButtonContainer。因此，您可以执行类似的操作（您不能使用jQuery，因为它只执行Bubbling阶段）：

//The following will catch the event prior to almost all other possible
//  event handlers.
var createEventButtonContainerEl;
window.addEventListener('click',function(e){
    if(!createEventButtonContainerEl){
        //If we have not previously found the create event button container, try to find it.
        createEventButtonContainerEl=document.getElementById('createEventButtonContainer');
    }
    if(createEventButtonContainerEl && createEventButtonContainerEl.contains(e.target)){
        //The elements we are interested in
        e.stopImmediatePropagation();
        e.preventDefault();
        //You may want to further determine which part of the `createEventButtonContainer`
        //  was clicked as different parts have different functions.
    }
}

Answer 2

您可以通过jQuery中的$()函数获取按钮。要获得按钮，他们无论如何都不是100％保证。并在页面加载结束时添加一个事件监听器。因此，您确定已加载完整页面。

Chome扩展：如何更改页面内按钮的行为？

2 个答案: