Use Grammarly in Overleaf
This tutorial is about an unofficial way to enable Grammarly on overleaf.com. Since Overleaf has special containers for displaying text instead of a simple text box, Grammarly doesn’t work there. However, it can be fixed.
Step 1: Make sure you use web versions of Overleaf and Grammarly
If you do, great! Please note that this tutorial was tested in Google Chrome.
Step 2: Add Grammarly extension
Add the official “Grammarly for Chrome” from the Chrome Web Store. Enable the extension (Step 5) and reload the page.
Step 3: Add unofficial Grammarly extension for Overleaf
A friend of mine told me about this stunning extension developed by Robin Dijkhof. This extension called “Overleaf textarea” is available on the Chrome Web Store and Firefox Browser Add-ons. Please note that this extension is unofficial. For more information, visit the original post about the extension.
After enabling this extension (Step 5) and reloading the page, your Overleaf should show Grammarly view instead of PDF preview on the right side of Overleaf.
Step 4: Add custom JavaScript for Overleaf
If you want the faster way to toggle between Grammarly view and PDF preview and if you want the dark theme, then continue reading! If not, go to Step 5.
JavaScript can be locally injected into the website you are viewing. Various extensions are doing that, I trust “Custom JavaScript for Websites 2” from the Chrome Web Store, but you can choose whichever extension you want. Enable the extension (Step 5) and reload the page.
After enabling this extension, you should click on the extension icon. Make sure you’re on overleaf.com. The window should appear. There can be custom JavaScript added. Read through the code below, copy it and paste it into the window. Save changes.
Congrats, you successfully added the custom button, the faster way to toggle between Grammarly view and PDF preview. Dark theme is enabled by default and can be disabled by setting the darkTheme variable to false. To use Grammarly, just interact with the box on the right side of the screen.
This custom code is pretty basic; it adds a toggle button. The button just toggles the visibility of the text area element. It is positioned using absolute values, so feel free to move it elsewhere by modifying the variables. Also, feel free to further improve this code.
Step 5: Enable added extensions
To have extensions enabled by default (without clicking on the extension icon every time) for Overleaf, click on “Extensions”, and for all added extensions, click on the three dots menu right next to them. Continue with “Manage extension”, where you set “Allow this extension to read and change all your data on websites you visit” to On specific sites. There needs to be added overleaf.com and www.overleaf.com to work correctly without our interaction. One can set it to On all sites without specifying the URLs, but that is not generally a great practice. That’s all.
