I’m working on a task in my chrome extension that should replace certain words (shortcuts) with values assigned to them in real-time (like Grammerly or TextBlaze).
For example, when the user enters “..n1”, it should be replaced with its value immediately in real-time.
After some research, I found out that Google Docs uses an iframe “docs-texteventtarget-iframe” that listens to keypress or keyup events, which triggers these API calls:

https://espresso-pa.clients6.google.com/v1/assistwriting?key=AIzaSyCmh4zG9srkxnlT2O2FRJLrxBOBRaWWxNk&alt=protojson
&
https://docs.google.com/document/d/1wlidxVwLYEJPrMlKEUZuRzZIDrsVyLkOw0dtzNlupAo/save?id=1wlidxVwLYEJPrMlKEUZuRzZIDrsVyLkOw0dtzNlupAo&sid=3e3dc4ed7c9221d&vc=1&c=1&w=1&flr=0&smv=53&smb=%5B53%2C%20%5D&token=AC4w5VgH7c1pHUV-tPR7dkYJntz6SC96LQ%3A1719751844899&includes_info_params=true&cros_files=false

(some query parameters are not always the same for these calls).

I believe Google Docs uses some internal mechanism to update the pages in a document as no updates happen in the DOM whenever a document is updated.

I have tried the Google App Scripts and Google Docs API, which work, but they take time as they wait for the API’s response to finish to show the result. I need the update to happen immediately like the Grammerly, Text Blaze: Templates and Snippets or TextExpander: Keyboard Shortcuts & Templates extensions do it, but I’m honestly lost on how I should do it.
I tried to debug their code but since it’s browser-compiled code, it’s extremely hard to understand the flow of the code.

This is the code so far in my extension’s content-script.js file for this scenario:

      const editingIFrame = document.querySelector('iframe.docs-texteventtarget-iframe')
      const editingIFrameDoc = editingIFrame?.contentDocument
      if (editingIFrameDoc) {
        let currentTypedValue: string = ''
        const script = editingIFrameDoc.createElement('script')
        script.textContent = ``
        // Add event listeners for keyup events
        editingIFrameDoc.addEventListener('keyup', (event) => {
          const key = event.key


          const allowedChars = new Set(
            'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 !@#$%^&*()-=_+[]{};':"\|,.<>/? '
          )

          if (allowedChars.has(key)) {
            currentTypedValue += key
          }
          const shortcuts = localStorage.getItem('aizamd_dot_phrases')
          if (shortcuts) {
            const phrases = JSON.parse(shortcuts)?.state?.phrases || null
            if (phrases) {
            // if the current typed string matches with any of the shortcuts
              const matchedTrigger = phrases.find((phrase) => phrase.trigger === currentTypedValue)
              if (matchedTrigger?.phrase) {
                currentTypedValue = ''
                // TODO: Replace the matched text in the Google Doc with the matched phrase
              }
            }
          }
        })
      }

The ‘keyup’ event on the “docs-texteventtarget-iframe” iframe does run whenever I press a key, I console.logged to confirm. But I can’t seem to figure out how to update/replace a text in the Google Docs page that matches a shortcut which is set up in my extension.