DEV Community

Cover image for Open document in "Viewing" mode
Kunal Kamble
Kunal Kamble

Posted on

1 1

Open document in "Viewing" mode

Have you ever opened a Google Doc and while looking through it unknowingly updated it? This adds to unnecessary history to the doc.
To prevent it one can just open the doc in "Viewing" mode. But there is no option to open the doc in "Viewing" mode by default.

After some reverse engineering, I discovered that the "Viewing" mode button is always present in the DOM once it gets added after the delay. This insight led me to write a script that ensures your Google Docs always open in "Viewing" mode by default.

Script to Open Google document in "Viewing" mode by default

;(async function () {
  // Some elements are not added to the DOM on initial load; one of such element is the menu containing "Viewing" mode.
  // Await till the mode switcher menu is added to the DOM.
  await new Promise(function (resolve) {
    var observer = new MutationObserver(function (mutations) {
      const targetContainerNode = document.querySelector('.docs-toolbar-mode-switcher-menu')
      if (!!targetContainerNode) {
        observer.disconnect()
        resolve()
        return
      }
    })

    // ".docs-toolbar-mode-switcher-menu" attaches on the body
    observer.observe(document.body, { childList: true })
  })

  const viewingModeButton = document.querySelector('.docs-toolbar-mode-switcher-viewing-menu-item')
  if (!viewingModeButton) {
    console.assert('[rational extension][doc mode] Unable to find mode buttons')
  }

  // Simulate click on viewing mode button
  simulateClick(viewingModeButton)
  console.count('[rational extension] Document mode be in "Viewing" mode')
})()

// For some reason the `HTMLElement.click()` method and just a `mousedown` event does not work here.
// To simulate click we need to fire `mousedown` followed by `mouseup` event
function simulateClick(onNode) {
  const createMouseEvent = (name) =>
    new MouseEvent(name, {
      view: window,
      bubbles: true,
      cancelable: true,
    })

  onNode.dispatchEvent(createMouseEvent('mousedown'))
  onNode.dispatchEvent(createMouseEvent('mouseup'))
}
Enter fullscreen mode Exit fullscreen mode

Here is the output:

Image description

You can use this script with browser extensions like Tampermonkey. Personally, I'm compiling several such scripts into a custom extension for ease of use. Feel free to check out my project on GitHub: Rational Chrome Extensions.

Thank you for reading.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more