Vlas Bashynskyi

This Chrome Extension Tutorial Will Blow Your Mind!

Is a quick snippet of code that you can use it to see every method call that's used by Google Docs.

Video

Transcript

if you want to develop a Chrome extension for Google Docs may be difficult because Google Docs renders information that you type in a canvas element and not in Dom

For example. If I type something here and then search for it in the document I can't find it but if I enter the selector, it will find a canvas element and this text is being typed on this canvas element and you may think that it's not possible to get this text from this canvas without some sort of text recognition software, however, it is possible if we capture the canvas class and each time Google Docs uses canvas API to paint text on a canvas.

We can actually, capture that function call here. Is a quick snippet of code that you can use it to see every method call that's used by Google Docs so if we run this code and try to type something here we can see how Google Docs feel the text of this canvas to paint this text that we are typing.

So we typed this text here and Google Docs used the full-text method of the canvas API to render it on the canvas.

This was a quick video to show you how it's possible to override canvas API and get information that's being rendered on canvas even though the data is not being displayed in the document thank you for watching.

Have a nice day :)