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

我很确定这是一个愚蠢的问题，但我正在努力找到一个有用的答案

我想捕捉用户在Google日历中创建新事件以执行某些操作的时间。所以我想象我可以通过修改“创建”按钮的行为来实现这一点

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

• 按钮的HTML将来可能会更改
• 由于日历是一个单页应用程序，我不知道在DOM中搜索按钮的合适时机

---

提前谢谢

您可以通过jQuery中的

$（）

函数设置get按钮。为了得到按钮，他们没有任何方式的100%保证。并在页面加载结束时添加事件侦听器。因此，您可以确保加载了完整的页面。

如果要更改按钮的行为，需要在当前处理程序之前插入一个内容脚本，以访问按钮上的事件。确切地说，您是如何做到这一点的，您需要拦截的事件会因情况而异

对于按钮，最有可能需要拦截的事件是，但可能需要拦截其他事件，例如或

对于其他类型的输入元素，当然还有多个其他可能的事件。例如，堆栈交换侦听和事件以获取其中的输入

真正确定需要拦截哪些事件的唯一方法是

实验：尝试最可能发生的事件，或事件组合，看看会发生什么，或

查看页面的代码以确定附加了哪些事件处理程序

显然，您可能会选择使用

stopImmediatePropagation（）

，和/或阻止调用已经存在的事件处理程序

按钮的HTML将来可能会更改

至于您担心页面的HTML可能会更改：是的，它可能会更改。那可能会打断你的分机。然后需要更新扩展名。如果可以确定代码用于页面的确切选择器，则可以尝试使用相同的选择器。这些是最不可能改变的事情，因为这需要网页设计者也改变他们的代码。但是，归根结底，您必须接受HTML可能会改变的事实。虽然您可以尝试减轻这些更改可能带来的影响，但您无法完全删除对您尝试与之交互的页面的HTML的依赖性

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

在DOM中搜索按钮的正确时间将取决于您尝试与之交互的特定页面。您可以使用多个潜在事件来确定何时添加事件处理程序，这些事件至少包括、和。但是，您可以选择在发生

单击或其他事件时进行此搜索。这需要更多的CPU资源，因此建议您在找到想要观看的元素之前（即，一旦找到，就记住该元素）

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

实际拦截事件：

您的目标是在页面脚本中的处理程序之前调用处理程序。在不知道事件侦听器实际放置在哪个元素上（它可能位于元素的任何祖先或元素本身）的情况下，如果将其放置在上，则最有可能首先调用处理程序的方法是在捕获阶段将其放置在
窗口中。您可能需要在加载任何内容之前运行脚本，以便您的处理程序是第一个添加到该类型事件的
窗口中的处理程序。但是，通常不需要确保在加载任何内容之前运行

对于您感兴趣的特定案例，Google日历中的“创建”按钮，包含该按钮的
的id是
createEventButtonContainer
。因此，您可以这样做（您不能使用jQuery，因为它只执行冒泡阶段）：

倾听URL散列更改（
Create
page uses
#eventpage_6
）可能更可靠，请参阅此通用信息的第二部分没有解决问题中列出的主要问题，而不是如何使用jQuery
。
//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.
    }
}