AI Twitter Reply Generator for Chrome: A Developer’s Guide

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getTweetContext') {
    const context = extractTweetContext();
    sendResponse(context);
  }
});

function extractTweetContext() {
  // Get the currently viewed tweet
  const tweetElement = document.querySelector('[data-testid="tweet"]');
  
  if (!tweetElement) {
    return { error: 'No tweet found' };
  }

  // Extract username and display name
  const username = tweetElement.querySelector('[data-testid="User-Name"]')?.textContent || '';
  const tweetText = tweetElement.querySelector('[data-testid="tweetText"]')?.textContent || '';
  
  // Get engagement metrics for context
  const replies = tweetElement.querySelector('[data-testid="reply"]')?.textContent || '0';
  const reposts = tweetElement.querySelector('[data-testid="retweet"]')?.textContent || '0';
  const likes = tweetElement.querySelector('[data-testid="like"]')?.textContent || '0';

  return {
    username,
    tweetText,
    engagement: { replies, reposts, likes },
    timestamp: new Date().toISOString()
  };
}

// popup.js
document.getElementById('generate').addEventListener('click', generateReplies);

async function generateReplies() {
  const button = document.getElementById('generate');
  const repliesDiv = document.getElementById('replies');
  
  button.disabled = true;
  button.textContent = 'Generating...';
  repliesDiv.innerHTML = '';

  try {
    // Get tweet context from content script
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const context = await chrome.tabs.sendMessage(tab.id, { action: 'getTweetContext' });
    
    if (context.error) {
      repliesDiv.innerHTML = `<p style="color: red;">${context.error}</p>`;
      return;
    }

    // Update preview
    document.getElementById('author').textContent = context.username;
    document.getElementById('tweetText').textContent = context.tweetText;

    // Build the prompt
    const tone = document.getElementById('tone').value;
    const customPrompt = document.getElementById('customPrompt').value;
    
    const prompt = buildReplyPrompt(context, tone, customPrompt);
    
    // Call AI API
    const replies = await callAIAPI(prompt);
    
    // Display generated replies
    replies.forEach((reply, index) => {
      const div = document.createElement('div');
      div.className = 'reply-option';
      div.textContent = reply;
      div.addEventListener('click', () => selectReply(reply, div));
      repliesDiv.appendChild(div);
    });
  } catch (error) {
    repliesDiv.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
  } finally {
    button.disabled = false;
    button.textContent = 'Generate Replies';
  }
}

function buildReplyPrompt(context, tone, customPrompt) {
  return `You are writing a reply to the following tweet from ${context.username}:

"${context.tweetText}"

Engagement: ${context.engagement.replies} replies, ${context.engagement.reposts} reposts, ${context.engagement.likes} likes

Write 3 different ${tone} replies that are thoughtful and engaging. Each reply should be under 280 characters.

${customPrompt ? `Additional instructions: ${customPrompt}` : ''}

Format your response as a JSON array of strings.`;
}

async function callAIAPI(prompt) {
  const { apiKey } = await chrome.storage.local.get('apiKey');
  
  if (!apiKey) {
    throw new Error('API key not configured. Please set up your API key.');
  }

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-3-5-sonnet-20241022',
      max_tokens: 1024,
      messages: [{ role: 'user', content: prompt }]
    })
  });

  const data = await response.json();
  
  // Parse the JSON array from response
  try {
    return JSON.parse(data.content[0].text);
  } catch {
    return data.content[0].text.split('\n').filter(line => line.trim());
  }
}

function selectReply(reply, element) {
  // Remove previous selection
  document.querySelectorAll('.reply-option').forEach(el => el.classList.remove('selected'));
  element.classList.add('selected');
  
  // Copy to clipboard or trigger Twitter's reply
  navigator.clipboard.writeText(reply);
  alert('Reply copied to clipboard! Paste it on Twitter to post.');
}

// options.js - separate page for configuration
document.getElementById('save').addEventListener('click', async () => {
  const apiKey = document.getElementById('apiKey').value;
  const provider = document.getElementById('provider').value;
  
  await chrome.storage.local.set({ apiKey, provider });
  document.getElementById('status').textContent = 'Settings saved!';
});

function detectThread() {
  const threadIndicator = document.querySelector('[data-testid="cellInnerDiv"]');
  const previousTweets = document.querySelectorAll('[data-testid="tweet"][aria-label]');
  return previousTweets.length > 1;
}

async function trackReplyChoice(reply, tone) {
  const stats = await chrome.storage.local.get('replyStats') || {};
  stats[tone] = (stats[tone] || 0) + 1;
  await chrome.storage.local.set({ replyStats: stats });
}

const languagePrompt = `Detect the language of the tweet and reply in the same language.`;