EasyMail: A Gemini Email Organizer

---

📨 About the Project — EasyMail: A Gemini Email Organizer

🌟 Inspiration

Managing emails can be overwhelming — long threads, unclear requests, and language barriers make communication time-consuming. I wanted to build something that makes handling emails effortless — not just a reply generator, but a complete AI assistant for your inbox.

The inspiration came from the idea of leveraging Google Chrome’s built-in on-device AI capabilities (like the Writer, Summarizer, Rewriter, and Proofreader APIs) to create a privacy-focused, fast, and smart email companion — all running locally within the browser, without needing any external API keys.

---

🧠 What I Learned

Working on EasyMail gave me deep insights into the new generation of browser AI APIs — including:

• The Prompt API for structured interactions with on-device models.
• The Writer, Rewriter, Summarizer, Proofreader, and Translator APIs for different natural language tasks.
• Handling user activation constraints (navigator.userActivation.isActive) required for creating AI instances securely.
• Efficient DOM extraction and scripting using chrome.scripting.executeScript() to safely read email content.
• Managing language detection using the experimental LanguageDetector API and dynamically adapting responses.

I also explored how context-aware summarization and tone adaptation could make AI replies more natural and human-like.

---

🛠️ How I Built It

EasyMail is built entirely as a Chrome Extension, with modular ES6-based architecture:

• Frontend (Side Panel / Popup):

  • A clean UI for buttons like Summarize, Reply, Improve, Translate, and Proofread.
  • Real-time interaction area showing user prompts and AI responses.

• APIs:

  • summarizer.js — Uses the Summarizer API for paragraph + key-point summaries.
  • writer.js — Leverages the Writer API to draft context-aware, polite replies.
  • rewriter.js — Refines or improves draft emails while preserving meaning.
  • proofreader.js — Corrects grammar and improves readability.
  • translator.js — Automatically translates emails based on detected language.
  • languageDetector.js — Uses the Language Detector API to auto-detect the language before processing.
  • prompt.js — Uses Prompt API for prompts given in chat box.

• Chrome Integration:

  • Uses chrome.tabs.query and chrome.scripting.executeScript to capture open email content.
  • Handles asynchronous communication between background and content scripts.

Technology Stack: [ \text{HTML + CSS + JavaScript (ES Modules) + Chrome Extension APIs + Built-in AI APIs} ]

---

⚙️ Challenges I Faced

1. Experimental API limitations — The built-in AI APIs (Writer, Summarizer, etc.) are still experimental, so I had to enable several Chrome flags like:

   • chrome://flags/#writer-api-for-gemini-nano
   • chrome://flags/#summarizer-api-for-gemini-nano
   • chrome://flags/#proofreader-api-for-gemini-nano This required handling cases where APIs were unavailable or user activation was missing.

2. DOM inconsistency across email clients — Extracting the right email content from Gmail was tricky due to different HTML structures.

3. Language and tone alignment — Ensuring that the reply tone matched the sender’s tone required fine-tuning the shared context and instructions.

4. User activation requirement — Since the Summarizer and Writer APIs only initialize after a direct user action, I had to redesign UX flows so users always trigger generation through a click event.

5. Testing and debugging experimental features — API behavior changed across Chrome builds, so continuous testing after each update was crucial.

---

🚀 Outcome

After overcoming these challenges, EasyMail now allows users to: ✅ Summarize long email threads. ✅ Generate smart, tone-matched replies. ✅ Translate messages automatically. ✅ Rewrite or improve drafts for clarity. ✅ Proofread outgoing emails instantly.

All of this happens locally, securely, and seamlessly inside your Chrome browser — no external APIs or data sharing needed.

---

💡 Future Scope

• Adding voice command support to interact with emails hands-free.
• Integrating auto-detection for email tone and urgency.
• Expanding compatibility with multiple email providers.
• Introducing smart templates and batch summarization for inboxes.

---

🧩 In Summary

EasyMail transforms your inbox into an intelligent workspace — using Chrome’s on-device AI to save time, write better, and communicate effortlessly.

---

EasyMail — Quick start & test guide (step-by-step)

Follow these steps to download the EasyMail source from GitHub, load it into Chrome as an unpacked extension, enable the experimental built-in AI APIs, and test the extension in your mail tab.

1. Download the source from GitHub

   1. Open the GitHub repo page for EasyMail (example: https://github.com/<your-org>/easymail).
   2. Click Code → Download ZIP (or clone with git clone https://github.com/<your-org>/easymail.git).
   3. If you downloaded the ZIP, extract it to a convenient folder (e.g., ~/Downloads/easymail or C:\Users\<you>\Downloads\easymail).

2. Enable Chrome developer extensions UI & load unpacked

   1. Open Chrome.
   2. Go to chrome://extensions/.
   3. Turn on Developer mode (toggle at top-right).
   4. Click Load unpacked.
   5. In the file picker, select the EasyMail project folder (the folder containing manifest.json).
   6. After loading, you should see EasyMail listed. If there are errors, click Errors to view messages.

3. Enable required experimental flags You must enable the experimental in-browser AI APIs that EasyMail uses:

   1. In the Chrome address bar go to:
      • chrome://flags/#writer-api-for-gemini-nano
      • chrome://flags/#rewriter-api-for-gemini-nano
      • chrome://flags/#proofreader-api-for-gemini-nano
      • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
   2. For each flag:
      • Set the dropdown to Enabled.
   3. Click Relaunch (Chrome will prompt you to restart).
      • If Chrome does not auto-relaunch, close and re-open the browser manually.

4. Confirm extension permissions / host permissions

   1. Back in chrome://extensions/, click Details for EasyMail.
   2. Ensure the listed permissions include anything needed by the manifest (e.g., scripting, activeTab, storage, identity) and that Host permissions include https://mail.google.com/ (or other mail hosts you plan to test).
   3. If host permissions are missing, update the manifest or reload the extension (edit manifest then click the circular reload icon on the extension card).

5. Restart Chrome and open your mail

   1. After flags are enabled and the extension is loaded, fully restart Chrome if you haven't already.
   2. Open your Gmail in a tab.
   3. Go to an open email (viewing a message thread) for testing.

6. Activate extension UI & user activation requirement Most browser AI APIs require a user gesture to create model instances. To trigger this:

   1. Click the EasyMail extension icon in the toolbar (or open the extension side panel if EasyMail injects a UI).
   2. Interact with the extension UI (click a button such as Summarize or Generate Reply).
      • This click satisfies navigator.userActivation.isActive and allows EasyMail to create Writer/Summarizer instances.

7. Test the core features (suggested order) Use a sample email such as a short request from a colleague: Now try each button in EasyMail’s UI and verify behavior:

   1. Summarize
      • Click Summarize.
      • Expected: A short, readable summary of the email appears (overview + key points if implemented).
   2. Reply
      • Click Reply.
      • Expected: A context-aware email reply is generated (acknowledges request, confirms timeline).
   3. Improve / Rewriter
      • Paste a draft into the input (or use detected email) and click Improve.
      • Expected: A clearer, more concise rewrite that preserves meaning and tone.
   4. Translate
      • With an email in another language or by specifying target language, click Translate.
      • Expected: A translated version of the email or draft into the chosen language.
   5. Proofread
      • Paste a draft with grammar issues and click Proofread.
      • Expected: A corrected, proofread version with suggestions or the corrected text.
   6. Custom input
      • Type or paste a custom message, press the Send (or prompt) control — test the prompt UI and mock AI if present.

8. Verify language detection (if present) If EasyMail uses languageDetector:

   1. Click a feature that triggers detection (e.g., Summarize or Reply).
   2. Check console logs for detected language score and chosen code (e.g., en).
   3. If detection fails, the extension should fallback to "en".

9. Debugging & troubleshooting If something doesn’t work, try these checks:

   • Console logs
     • Right-click the EasyMail side panel or extension popup and choose Inspect (or open DevTools for the mail tab) to view console logs. Look for messages such as:
     • Writer API unavailable or Summarizer API not available
     • User activation required (means you need to click before generating)
     • No email content could be found on the active tab. (DOM selectors need adjustment)
   • Flags not enabled
     • Verify the three flags are Enabled in chrome://flags/ and Chrome was relaunched.
   • Host permissions
     • If the content script cannot read the email DOM, ensure host_permissions in manifest.json include your mail domain (e.g., https://mail.google.com/).
   • API errors
     • If Writer/Summarizer calls fail with errors, check the extension console and the experimental flag status. The APIs are experimental and may change.
   • User activation
     • Some features only initialize after a direct user gesture — clicking a button in the extension UI before calling APIs usually resolves this.
     • Select fallback
     • If DOM extraction fails on a particular webmail, try selecting the message text manually and use any “use selection” fallback in the UI (if implemented).

10. Good-to-know testing tips

    • Try short and long emails to test summarizer length handling.
    • Test non-English emails to verify translator and proofreader behavior and language detection fallback.
    • Keep the DevTools console open while you test for detailed logs and error traces.
    • If you modify extension code, click the circular Reload icon on the extension card in chrome://extensions/ to pick up changes, then refresh the mail tab.

11. Clean up / uninstalling

    1. Go to chrome://extensions/.
    2. Find EasyMail and click Remove to uninstall.
    3. Optionally, disable the experimental flags in chrome://flags/ and restart Chrome.

12. Privacy & safety reminder

    • This extension will read email content to summarize/generate replies. Do not test with sensitive or confidential emails unless you control the environment and understand where generated content or logs may be sent.
    • Experimental APIs and flags may change behavior or the safety model; use them on a development profile.