How to Build an AI Email Reply Generator Chrome Extension with JavaScript

• name, description, version: Self-explanatory metadata for our Email reply generator extension.
• manifest_version: 3: Specifies that we are using the latest and most secure version of the Chrome extension platform. In simple words its specifes the extension version.
• permissions: We request "storage" to potentially save custom templates in the future and "activeTab" for general interaction.
• host_permissions: This is crucial for security. :*//mail.google.com/*: Grants our extension permission to run on Gmail.
• https://generativelanguage.googleapis.com/*: Grants permission to make API calls to Google's Gemini AI. 
• content_scripts: This is where we tell Chrome to inject our content.js file into any page that matches the *://mail.google.com/* pattern. In simple words it tell the extension to run this file.

  
console.log("Email Writer Extension - Content Script Loaded");
// --- Helper Functions to Create UI Elements ---
function createAIButton() {
    const button = document.createElement('div');
    button.className = 'T-I J-J5-Ji aoO v7 T-I-atl L3'; // Mimic Gmail's button style
    button.style.marginRight = '8px';
    button.innerHTML = 'AI Reply';
    button.setAttribute('role', 'button');
    button.setAttribute('data-tooltip', 'Generate AI Reply');
    return button;
}



function createTemplateDropdown() {
    const dropdown = document.createElement('select');
    dropdown.className = 'T-I J-J5-Ji aoO v7 T-I-atl L3 template-dropdown';
    dropdown.style.marginRight = '8px';
    dropdown.setAttribute('role', 'button');
    dropdown.setAttribute('data-tooltip', 'Insert Template');

    // Default option
    const defaultOption = document.createElement('option');
    defaultOption.text = 'Templates';
    defaultOption.disabled = true;
    defaultOption.selected = true;
    dropdown.appendChild(defaultOption);

    // Hardcoded templates
    const templates = [
        { name: "Birthday Wish", subject: "Happy Birthday ??", body: "Dear [Name],\n\nWishing you a very Happy Birthday! ????\n\nMay your day be filled with joy, love, and laughter.\n\nBest regards,\n[Your Name]" },
        { name: "Leave Application", subject: "Leave Application Request", body: "Dear [Manager's Name],\n\nI would like to request leave from [start date] to [end date] due to [reason].\n\nKindly approve my request.\n\nBest regards,\n[Your Name]" },
        { name: "Thank You Note", subject: "Thank You", body: "Dear [Recipient],\n\nI just wanted to say thank you for your support and guidance. I truly appreciate it.\n\nBest regards,\n[Your Name]" },
    ];

    templates.forEach(template => {
        const option = document.createElement('option');
        option.value = template.name;
        option.text = template.name;
        option.dataset.subject = template.subject;
        option.dataset.body = template.body;
        dropdown.appendChild(option);
    });

    dropdown.addEventListener('change', (e) => {
        const selected = e.target.selectedOptions[0];
        const subject = selected.dataset.subject;
        const body = selected.dataset.body;
        const subjectBox = document.querySelector('input[name="subjectbox"]');
        if (subjectBox) { subjectBox.value = subject; }
        const composeBox = document.querySelector('[role="textbox"][g_editable="true"]');
        if (composeBox) {
            composeBox.innerHTML = ""; // clear old content
            composeBox.focus();
            document.execCommand('insertText', false, body);
        }
        e.target.selectedIndex = 0; // Reset dropdown
    });
    return dropdown;

}

// --- Core Logic Functions ---
function getEmailContent() {
    // This function tries to find the content of the email being replied to.
    const quote = document.querySelector('.gmail_quote');
    if (quote) return quote.innerText.trim();

    // Fallback for different Gmail layouts
    const content = document.querySelector('.a3s.aiL');
    if (content) return content.innerText.trim();
    return '';
}

function findComposeToolbar() {

    // Gmail's class names can change. This looks for the toolbar using several potential selectors.
    return document.querySelector('.gU.Up') || document.querySelector('.aDh');
}

async function generateAIReply(emailContent) {
    const API_KEY = 'AIzaSyCXpVrzhqsDB5uXowkjftJsE2OYCpKHr3o'; // IMPORTANT: Replace with your actual key
    const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${API_KEY}`;
    const prompt = `Generate a professional email reply for the following email content. Please don't generate a subject line. Email to reply to:\n\n---\n${emailContent}\n---`;
    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                contents: [{ parts: [{ text: prompt }] }]
            })
        });
        if (!response.ok) {
            throw new Error(`API request failed with status ${response.status}`);
        }
        const data = await response.json();
        // Navigate through the Gemini response structure to get the text
        return data.candidates[0].content.parts[0].text;

    } catch (error) {
        console.error("Error generating AI reply:", error);
        return "Sorry, I was unable to generate a reply. Please try again.";
    }

}


function injectButtons() {
    // Avoid duplicate buttons
    document.querySelector('.ai-reply-button')?.remove();
    document.querySelector('.template-dropdown')?.remove();
    const toolbar = findComposeToolbar();
    if (!toolbar) {
        console.log("Compose toolbar not found, will retry.");
        return;
    }

    // Always add the Templates dropdown
    const dropdown = createTemplateDropdown();
    toolbar.insertBefore(dropdown, toolbar.firstChild);

    // Only add the "AI Reply" button if we are replying to an email
    const emailContent = getEmailContent();
    if (emailContent && emailContent.length > 0) {
        const button = createAIButton();
        button.classList.add('ai-reply-button');
        button.addEventListener('click', async () => {
            button.innerHTML = 'Generating...';
            button.disabled = true;
            const generatedReply = await generateAIReply(emailContent);
            const composeBox = document.querySelector('[role="textbox"][g_editable="true"]');

            if (composeBox) {
                composeBox.focus();
                // We use execCommand for broad compatibility in content-editable divs
                document.execCommand('insertText', false, '\n\n' + generatedReply);
            }
            button.innerHTML = 'AI Reply';
            button.disabled = false;
        });
        toolbar.insertBefore(button, toolbar.firstChild);
    }
}

// --- Observer to Detect When the Compose Window Opens ---
const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {

        // Check if a new node was added that looks like a compose window
        const composeWindowAdded = Array.from(mutation.addedNodes).some(node =>
            node.nodeType === Node.ELEMENT_NODE && node.querySelector('.gU.Up, .aDh')
        );

        if (composeWindowAdded) {
            console.log("Compose Window Detected, injecting buttons.");

            // Wait a moment for Gmail's UI to fully render before injecting
            setTimeout(injectButtons, 500);
            return; // No need to check other mutations
        }
    }
});

// Start observing the entire document for changes
observer.observe(document.body, {
    childList: true,
    subtree: true
});