Chome Extension: How To Change Behavior Of A Button Inside A Page?

I'm pretty sure that this is a dumb question, but I'm struggling to find a helpful answer to that. I want to catch when the user creates a new event in Google Calendar to do some a

Solution 1:

If you want to change the behavior of a button, you are going to need to inject a content script that gets access to the event(s) on the button prior to the current handler. How, exactly, you do this, and the events you need to intercept will vary from situation to situation.

For a button, the most likely event which you need to intercept is click, but you may need to intercept other events, such as mousedown or mouseup.

For other types of input elements, there are, of course, multiple other events which are possibilities. As an example, Stack Exchange listens to the input, keydown, and keypress events to get input within textareas.

The only ways to actually determine which events you need to intercept are to

1. Experiment: try the most likely event, or combination of events and see what happens, or
2. Look at the code for the page to determine to what events handlers are attached.

Obviously, you will probably choose to use stopImmediatePropagation(), stopPropagation(), and/or preventDefault() to prevent the already existing event handler from being called.

The HTML of the button could change in the future

As to your concern that the HTML for the page may change: Yes, it might. That may break your extension. You will then need to update your extension. If you can determine the exact selectors which are used by the code for the page, you can attempt to use the same selectors. Those are the least likely things to change as it would require the designer of the webpage to also change their code. But, ultimately, you just have to live with the fact that the HTML might change. While you can try to mitigate the impact that such changes may have, there is nothing that you can do to fully remove your dependency on the HTML of the page you are attempting to interface with.

As the calendar is a Single Page App, I don't know the right moment to search for the button in the DOM

The right time to search for the button in the DOM will depend on the particular page that you are attempting to interface with. There are multiple potential events which you can use to determine when to add your event handlers, these include, at least, DOMContentLoaded, load, and readystatechange. However, you can choose to make this search at the time the click, or other event, occurs. This takes a bit more CPU resources, so it is advisable to only so until you find the element you desire to watch (i.e. once found, remember the element).

It may even be necessary to add your primary listener to the window prior to any page content being loaded. This may be needed when the page's listeners are attached to the window. The handler that is added first is called first. As an extension, you can choose to be sure your content script runs prior to any page content being loaded. Doing so allows you to be sure your handler is called first.

Actually intercepting the event:
Your goal is to have your handler called prior to the handler which is in the page scripts. Without knowing on which element the event listener is actually placed (it could be on any ancestor of the element, or the element itself), and if it is placed on the Capture, Target, or Bubbling phase, the way that you can make it most likely to have your handler called first is to place it on the window in the Capture phase. You may need to have your script run prior to any content being loaded so that your handler is the first one added to the window for that type of event. However, being sure to run prior to any content being loaded is usually not required.

For the specific case which you were interested, the "Create" button in Google Calendar, the id for the <div> containing the button is createEventButtonContainer. Thus, you could do something like (you can't use jQuery, as it only does the Bubbling phase):

//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.
    }
}

Solution 2:

You can make get the button via the $() function in jQuery. To get the button, they is no 100% guarantee with any way. And add an event listener at the end of the page loading. So you are sure that the complete page is loaded.