Building MonkeyType Logger: A Typing Tracker Error Extension

Table of Contents

1. My Journey to Faster and More Accurate Typing
2. Automating the Error Tracking Process
3. Extension for Tracking Typing Errors
   • Content.js (Capturing Typing Results)
   • background.js (Handling Events)
   • popup.html & popup.js (User Interface)
4. Analyzing Typing Errors
   • Jupyter Notebook (AI-Based Analysis)
   • Website for Data Visualization
5. Conclusion
6. Check Out My Work

My Journey to Faster and More Accurate Typing

The Beginning

Around four months ago , I started practicing Monkeytype daily to improve my typing speed and coding efficiency. Initially, I made good progress, but after about one month , I got stuck at a speed of 80-90 WPM and couldn’t improve further.

To break through this plateau, I decided to track my typing mistakes systematically. I began writing down all the words I mistyped and used AI to analyze them , identifying patterns and areas for improvement. Additionally, I started practicing specific coding-related typing techniques to enhance accuracy.

Check out my extension here! Monkeytype History Logger - Microsoft Edge Addons

Automating the Error Tracking Process

I then thought: Why not automate this tracking process? This led me to develop a browser extension that automatically records error words from my typing history.

Extension for Tracking Typing Errors

Content.js (Capturing Typing Results)

This file detects the appearance of result history elements on the screen and sends an event to background.js for processing.

{
    "id": 1740714390907,
    "time": "2025-02-28T03:46:30.907Z",
    "words": [
      { "reason": "corrected", "word": "be" },
      { "reason": "corrected", "word": "part" },
      { "reason": "corrected", "word": "not" },
      { "reason": "error", "word": "then" },
      { "reason": "error", "word": "some" }
    ]
}

Each record consists of:

• id : A unique identifier for the session.
• time : The timestamp of the recorded session.
• words : A list of words where mistakes occurred.
  • reason : Explanation for the mistake:
  • corrected: A word that was mistyped but corrected.
  • error: A word that was mistyped and skipped.
  • word : The actual word that caused the issue.

background.js (Handling Events)

This script listens for events and processes them. It currently supports three key actions:

• Saving Records : The SaveRecords event stores error logs in chrome.storage.local. With the unlimitedStorage permission, we can store up to 10,000 records (each 100 records take about 50KB ).
• Deleting Last Record : The DeleteLastRecords event removes the most recent entry for data management.
• Downloading Records : This event enables users to download their records as a JSON file for offline analysis.

popup.html & popup.js (User Interface)

The extension’s popup displays:

• Extension name
• Last recorded session
• Total stored records
• Buttons for download, delete, and import functionalities

Current Issue : Sometimes, chrome.storage.local loses the records, resetting them to zero. As a workaround, I manually download and re-import the data. Fixing this bug is a priority for the next update.

Analyzing Typing Errors

Jupyter Notebook (AI-Based Analysis)

If you're familiar with Python and Jupyter Notebook , you can analyze your typing data using AI techniques. Simply:

1. Place monkeytype_data.json in the same directory as your Jupyter Notebook file.
2. Run the notebook to see detailed insights into your typing mistakes and improvements.

📊 View My Jupyter Notebook Analysis

Website for Data Visualization

I also built a Next.js web app (deployed on Vercel Hobby Tier ) that lets users:

• Upload their JSON file.
• Visualize typing mistakes and progress trends.
• Gain personalized insights for improvement.

🌐 Visit My Analysis Website

This analysis helps me refine my typing habits and develop an AI-based assistant for further improvements.

Conclusion

If you want to improve your typing skills like I did, try this free and open-source extension. Follow the instructions and start tracking your mistakes.

💡 Benefits:

• Real-time tracking of errors and corrections
• AI-powered analysis for targeted improvements
• Web-based visualization of your progress

🚀 How to Get Started:

1. Install the extension on your preferred browser.
2. Practice typing and let the extension track mistakes automatically.
3. Regularly review your errors and adjust your practice accordingly.

Remember, consistent practice is key to increasing your typing speed and accuracy. Happy typing! 🎯

Check Out My Work

🔗 My Extension on GitHub🔗 My Extension on Store🔗 My Jupyter Notebook Analysis🔗 My Website for Analysis🔗 Follow My Blog Feed