Search code examples
javascriptgoogle-chrome-extension

How to force Google Docs to render HTML instead of Canvas from Chrome Extension?

After Google Docs' update to canvas based rendering instead of HTML rendering, is it possible to force Google Docs' to render HTML from a chrome extension instead of a canvas? Somehow chrome extensions like Grammarly are able to do it but I'm not entirely sure how.

From my research though I think what allows them to do it through the _docs_force_html_by_ext variable, however I believe this is only for whitelisted extensions.

Is there some sort of alternative or a form I can fill out to get my extension whitelisted?

enter image description here

_docs_force_html_by_ext is undefined:enter image description here

_docs_force_html_by_ext is set through Grammarly:enter image description here

Solution

  • There are two solutions to the problem: For older versions of Google Docs And for new versions.

    Solution is for older versions of Google Docs

    You need to add the GET-parameter ?mode=html to the URL.

    For example if document URL is:
    docs.google.com/document/exampleId/edit

    Change URL to:
    docs.google.com/document/d/exampleId/edit?mode=html

    This will force Google Docs to use HTML-renderer.

    Update March 4, 2022

    Google changed the html render activation code. The html renderer is in the current code, and it works if you turn it on manually. I'm now looking into what new conditions need to be met to enable it automatically. I will report the results later.

    Update March 9, 2022

    The New solution

    Once again, it proves that Google programmers are not as good as they are made out to be. So...

    Now there are three ways to enable html rendering. At least I found three:

    1. Before the start of the Google Docs code:
      window._docs_force_html_by_ext == true ? 'html render' : 'canvas render'
    2. Before the start of the Google Docs code:
      (GET['mode']=='html' && window._docs_flag_initialData['kix-awcp'] == true) ? 'html' : 'canvas'
    3. Set the required parameters manually in the right place in the Google Doc code.

    But, programmers at Google forgot that the window object also contains references to elements that have an id attribute set. For example:

    HTML:
<span id="spanId"></id>
JS:
window['spanId'] == true;

    That is, if we can add an id attribute to any element on the page, the value of which will be equal to _docs_force_html_by_ext, then we will automatically receive an identifier in the window object with !=false value. From which it follows that html rendering will turn on, since the conditions of method 1 are met. For example

    <body id="_docs_force_html_by_ext ">

    Hint 1: As far as I know, any browser plugin can run before the main code and add an id attribute to any element.

    Hint 2: link element can have an id attribute to. I think you get the hint.