2

I am trying to create a Chrome extension that reads and writes to Google Docs in real time to add suggestions to a user's text, similar to the chrome extension Grammarly. I've looked around and the best thing I've found is a library called GoogleDocsUtil however after Google Docs' update to canvas based rendering it no longer works. I've also found other answers on Stack Overflow saying one potential way to do this is by triggering keypresses with an event, however I have not been able to get it to work either. The final way I've discovered is by integrating with Google's own APIs however this approach is slow and would not be in real time.

What is the best way to approach this problem?

charlietfl
  • 170,828
  • 13
  • 121
  • 150
Hudson Kim
  • 416
  • 6
  • 15

1 Answers1

1

Approach #1

It is possible to create an Integration with the google docs annotated canvas. Though it requires you to get you application whitelisted by the google docs team.

NOTE: If you are not able to get you application whitelisted then this approach might not be for you.

See following on how to get whitelisted: https://stackoverflow.com/a/71321036/5432087

The approach I have used is build around the Mutation Observer API rather that click listeners. See the API https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver .

The idea is to listen for changes to the DOM rather than listen to the user actions. Where to set the Mutation Observers can be predicted as the DOM format is the same.

I cannot tell you the whole solution as its a couple of thousand lines, for the features that I have implemented, but the use of Mutation Observers was breaking for me in solving this problem without using the Google Docs API. I can also tell you that Mutation Observers proves to be really effective at real time.

Approach #2

Another approach would be to integrate with the Google Docs Rest API. See the docs: https://developers.google.com/docs/api/reference/rest

Axtru
  • 171
  • 1
  • 9