I am currently working on a Chrome extension and want it to work on Google Docs to highlight the text. Google docs is moving to the Canvas rendering for pages which basically removes all the text from the DOM and we only have a canvas element in the DOM for every page.
I have noticed that by setting window._docs_force_html_by_ext = <extension-id> on the Google docs webpage, we can force it to render DOM as HTML, not as canvas. This works fine for me. I have also seen some extensions set window._docs_annotate_canvas_by_ext = <extension-id> and that ensures that the canvas rendered is annotated with a lot DOM elements inside the canvas element. This annotated canvas allows for positional computations for the text.
I have tried inserting the script the same way but it does not seem to have any effect on the DOM. Is there anything else I need to do?
Any help is highly appreciated. Thanks in advance.
At the current moment in time the HTML Fallback option will render before the Annotated Canvas option. This means that if you have any extension running that forces the HTML Fallback option then the Annotated Canvas option wont render.
This is sad news for those who has a running integration with Annotated Canvas option because any other application installed might force the script back to the HTML Fallback option.
Personally i apply a simple check and handle both solutions based on what the document returns:
const runInitializers = (): void => {
const canvasFirstPage = document.querySelector(
'#kix-appview > div.kix-appview-editor-container > div > div:nth-child(1) > div.kix-rotatingtilemanager.docs-ui-hit-region-surface > div > div.kix-page-paginated.canvas-first-page'
);
const fallbackFirstPage = document.querySelector(
'#kix-appview > div.kix-appview-editor-container > div > div:nth-child(1) > div.kix-zoomdocumentplugin-outer > div > div > div > div:nth-child(2) > div'
);
if (canvasFirstPage) {
initAnnotatedCanvas();
} else if (fallbackFirstPage) {
initHTMLFallback();
}
};