Learning English with crosswords and an extension integrating ChatGPT
2 minutes read. Published:
Table of contents
I'm trying to improve my English knowledge to pass the IELTS exam. To do so, I've decided to solve some crosswords from the vox archive at https://www.vox.com/pages/crossword-puzzles-free-archive.
However, my crossword-solving skills are far from stellar, often leading me to rely on the "Reveal Word" button. The problem is that while it shows me the answer, it doesn't help me understand the meaning of it, and if I don't understand the answer, I'm not learning anything... To understand the answer I often ended up reaching for Google Translate or ChatGPT. Juggling around the crossword, the translator and the AI assistant was boring and slowing my learning process, so I've decided to create a Firefox extension introducing a dedicated sidebar that seamlessly integrates with the crossword page, providing explanations for the revealed answers. Now, whenever I hit that "Reveal Word" button, I don't just get the solution; I also receive a clear and concise explanation of the answer's meaning right on the same page.
Initially I didn't have any clue on how to build an extension, so I've asked an AI (perplexity.ai) how to do so. It gave me some code to copy-paste in a folder and I was up and running in a minute, with a custom sidebar on every page.
The rest of the time was spent
- trying to attach the sidebar only to the specific iframe loading the crossword ui
- retrieving the text of the highlighted solution (filled after pressing "Reveal Word") from the grid with some
document.querySelectorAll - calling the OpenAI API with the following prompt:
You are an expert at solving crosswords.
The user is trying to solve crosswords to improve his English knowledge.
Given the clue text and the answer text, explain the answer to the user.
- Getting the
fetchapi working: I had encountered an infamous network error without any detail, and it took me some time to find out the issue was about CORS requests... The solution was to add some permissions to the web manifest
"permissions": [
"webRequest"
],
"host_permissions": [
"https://cdn3.amuselabs.com/vox/crossword*"
],
To make everything seamless, I've attached a click event listener to the button Reveal Word, so that pressing it shows my custom sidebar with the explanation of the answer.
Now let's finally do some crosswords...
