Google Docs - programmatically send mouse click to an item in outline pane

Question

In Google Docs you can open outline pane and see all headers in the document, you can also click on an header and the view will scroll to header.

My question is how simulate mouse click programmatically with JS in Chrome extention, to scroll the view to the desired header?

I tryed following code but nothing hapend:

// usage: eventFire(document.getElementById('mytest1'), 'click');
function eventFire(el, etype) {
    if (el.fireEvent) {
        el.fireEvent('on' + etype);
    } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
}

The headers is an div elements with class="navigation-item-content navigation-item-level-2", When I look in chrome dev tools > event listeners, these elements do not have any event listeners.

See [this answer](https://stackoverflow.com/a/43331339/3930351) — Iván Nokonoko, Aug 17 '18 at 08:05

score 11 · Accepted Answer · answered Aug 17 '18 at 10:12

11

From this answer:

Try with this code; it simulates a mouse left click on the element by a quick succession of mousedown, mouseup and click events fired in the center of the element:

var simulateMouseEvent = function(element, eventName, coordX, coordY) {
  element.dispatchEvent(new MouseEvent(eventName, {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: coordX,
    clientY: coordY,
    button: 0
  }));
};

var elementToClick = document.querySelector('#mytest1');

var box = elementToClick.getBoundingClientRect(),
    coordX = box.left + (box.right - box.left) / 2,
    coordY = box.top + (box.bottom - box.top) / 2;

simulateMouseEvent (elementToClick, "mousedown", coordX, coordY);
simulateMouseEvent (elementToClick, "mouseup", coordX, coordY);
simulateMouseEvent (elementToClick, "click", coordX, coordY);

answered Aug 17 '18 at 10:12

Iván Nokonoko

4,888
2
19
27

Thanks to you, my Read Aloud Chrome extension will now be supporting Google Play books and Google Slides! – Sarsaparilla Mar 06 '19 at 16:21
@HaiPhan Happy to help :) – Iván Nokonoko Mar 06 '19 at 17:47
1

It looks like I have to use all 3 events in this specific order. Do you have any idea why? – tprieboj Dec 18 '19 at 16:55
@TomP That's the order mouse events are triggered when you click with your mouse. The code just mimics that. – Iván Nokonoko Dec 18 '19 at 17:22

Google Docs - programmatically send mouse click to an item in outline pane

1 Answers1

Linked