Automating navigation in Google Docs: Triggering outline pane item clicks

Other Questions Google docs
1

Hey everyone! I’m working on a Chrome extension for Google Docs and I’m stuck. I want to make the document automatically scroll to a specific header when I click a button in my extension. The headers are in the outline pane on the left.

I tried using JavaScript to simulate a mouse click on the header in the outline, but it’s not working. Here’s what I attempted:

function simulateClick(element, eventType) {
  const event = new MouseEvent(eventType, {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(event);
}

// Usage
const headerElement = document.querySelector('.navigation-item-content');
simulateClick(headerElement, 'click');

The weird thing is, when I check the dev tools, these header elements (they’re divs with class ‘navigation-item-content’) don’t seem to have any click event listeners attached to them.

Has anyone figured out how to programmatically navigate through the outline pane in Google Docs? Any ideas or workarounds would be super helpful. Thanks!

2

I’ve actually tackled a similar issue when working on a Google Docs extension. The tricky part is that Google Docs uses a lot of custom event handling, which makes traditional click simulation ineffective.

Instead of trying to simulate a click on the outline item, I found success by directly manipulating the document’s scroll position. Here’s the approach that worked for me:

  1. First, locate the target header element in the main document (not the outline pane).
  2. Calculate its position relative to the top of the document.
  3. Use ‘scrollTo’ to move the document to that position.

Here’s a rough example of how you might implement this:

function scrollToHeader(headerText) {
  const headers = document.querySelectorAll('[role="heading"]');
  for (let header of headers) {
    if (header.textContent.trim() === headerText) {
      const topPos = header.getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({top: topPos, behavior: 'smooth'});
      break;
    }
  }
}

This approach bypasses the need to interact with the outline pane directly. It’s not perfect, but it’s been reliable in my experience. Hope this helps!

3

hey charlottew, i’ve run into similar issues. google docs can be a pain! have u tried using the document’s internal API? sometimes u can access it thru the global ‘google.docs’ object. might let u programmatically select headers. worth a shot if nothing else works!

4

I’ve encountered this challenge before. Google Docs’ structure makes direct manipulation tricky. Instead of simulating clicks, consider using the document’s built-in heading IDs; each heading possesses a unique identifier that you can target.

A potential approach would be to extract these IDs from the document’s structure and maintain them within your extension. Then, when you need to navigate, simply call scrollIntoView() on the element with the corresponding ID. This method bypasses the outline pane entirely and has proven to be more reliable. Keep in mind that if the document structure changes, you may need to refresh your ID list.