Enable browser + plugin spell checking ability within static website content elements. This is different from basically all other spell checker tools, as they work only with input forms or editable elements.
Important: This script is intended for frontend views only. Don't use it in backend/admin tools.
- You want an additional quality measure (e.g. this can be a great visual aid for external QA teams)
- Text is mixed with code and HTML markup
- You need more than just spell checking (e.g. tone of voice, context, synonyms)
- Native browser spell checking is not enough
- There is no backend interface, which would automatically benefit from browser and plugin spell checking
- Fast in-page QA workflows (independent of code or access to original text documents)
- As additional measure to other quality measures
- Only temporary, for text QA purposes. I highly suggest disabling the script in your browser plugin, whenever you don't need it.
- This script will break the page and things might not work and behave as they should.
- Don't worry if the layout breaks, it's not permanent (just reload the page)
- Do not use this script in any backend environment or editors. These benefit from native spell checking abilities.
This script
- It makes sense if you use plugins like 'Grammarly' (and others). If you don't use them, there is no benefit from using this script.
- Spell checking will work anywhere, but still requires to be triggered manually. This is the same way as these tools work if you edit it in their own environment. They will react only to your input and interaction. It can be a bit annoying to do, but the results are surely worth it!
External spell checkers
- Some spel checking services have text length limits (depending on your plan). This might lead to long text being ignored.
- Word-like software (these can be extended with better spell checkers like those named here)
- Write directly within spell checking tool editors
VSCode
Great plugins that work with your code:
The script sets anything to be editable by adding the needed HTML attributes to any elements that usually contain text. This allows you to trigger spell checking in any element, even if they are dynamically loaded after the page is finished!
With Grammarly
With LanguageTool
- You know how to use browser plugins and can figure out the one we need.
- You have a spell checking plugin or want to install and use one.
Optional: If you don't already have one, install a language checking plugin like one of these:
I've tested this script with these plugins. It probably works with more than just these.
Important: Go with a single solution! Enabling multiple plugins simultaneously could lead to none of them working at all.
- Download the source code
- Install the browser plugin Tampermonkey
- Add a 'New userscript' in Tampermonkey and remove its default code
- Copy the JavaScript in the userscript form
- Edit the top-comment part and adjust the '@include' domains to your needs, e.g. like this:
@include http://example.com/*(just replace the examples)
- The placeholder stands for any page on this domain
- Make sure to correctly write 'http' or 'https' (if unsure, add both)
Before progressing: Make sure to read the warnings section carefully!
- Go to any of the websites you defined in the script
- This is NOT intended to work with forms and backend editing tools!
- Check if your spell check plugin is enabled and the 'Tampermonkey' icon shows that the script for your website is working.
- Click through the website elements to trigger the plugins checking mechanisms.
- Grammarly: It has a slight delay (1-2 seconds) and might require editing the text
- LanguageTool: Double-clicking in text triggers the check
- Note that sometimes its icon will be shown in the bottom right of the full screen, not within the element itself
- Try and change some text. Add some intentional mistakes to see if everything is working.
- Now you should see the tool suggesting changes and – if enabled – the browsers native spell checker kick in.
- Fix the corrections at their source.
- Suggestion: If you cannot access it or it's not your task to do so; save the new text, location and add a screenshot for other team members.
You can also manually trigger the script by calling this in your browser console:
window.ccSpellCheck()
This will apply the required HTML changes to any elements to make the spell checkers work (again). Great for dynamically loaded content, that changes while you browse the page!
Enable on typical DEV-environments:
// @include http*://localhost*
// @include http*://dev-*.test*
Enable anywhere (not recommended):
// @include http*://*
- Enable manual triggering via prompt() after content load
- Find out which HTML attributes are required exactly (it's a combination of them, but not all)
- Implement auto-reload for Single Page Applications (like Angular) on content/route change (?)
- Alternative: Implement UI and hotkey to manually trigger the tool when needed
- Apply and trigger content editability only when and where needed
- Disable clickable elements to prevent redirection and unwanted UI updates?
- Legals: Find out if this tool violates any API restrictions (it shouldn't and is not intended so)