chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  fetch('YOUR_BACKEND_ENDPOINT_URL', { // Replace with your server endpoint handling HF API calls
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: request.message })
  })
  .then(response => response.json())
  .then(data => {
    sendResponse({ reply: data['generated_text'] });
  });

  return true;  // Indicates asynchronous response
});

setInterval(() => {
  const chatMessages = document.querySelectorAll('.message'); // Update selector according to the chat site's DOM.
  if (chatMessages.length > 0) {
    const lastMessage = chatMessages[chatMessages.length - 1];
    const textField = document.querySelector('.text-input'); // Update selector according to the chat site's DOM.

    if (lastMessage && textField) {
      const messageText = lastMessage.textContent;
      // Sending message content to the background script
      chrome.runtime.sendMessage({ message: messageText }, function(response) {
        textField.value = response.reply;
      });
    }
  }
}, 5000); // Adjust interval as needed

{
  "manifest_version": 3,
  "name": "Chat Responder",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

<!DOCTYPE html>
<html>
<head>
    <title>Chat Responder</title>
</head>
<body>
    <h1>Chat Responder</h1>
    <p>Automatically responds to the last message using AI.</p>
</body>
</html>

# Your Hugging Face API key
HUGGING_FACE_API_KEY = '<TRUFFLEHOG_REDACTED_HUGGINGFACE>'
MODEL_NAME = 'your-model'  # Replace with your model name


from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json
import logging
from langdetect import detect
import asyncio
import aiohttp

# Configure logging
logging.basicConfig(level=logging.INFO, format='%(asctime)s %(levelname)s:%(message)s')

# Model configuration
MODEL_MAP = {
    'en': ['distilgpt2', 'EleutherAI/gpt-neo-125M'],  # Two models for English
    'de': ['dbmdz/german-gpt2'],                     # One model for German
    'fr': ['Helsinki-NLP/opus-mt-en-fr'],            # One model for French
    'es': ['Helsinki-NLP/opus-mt-en-es']             # One model for Spanish
}

HUGGING_FACE_API_KEY = 'YOUR_HUGGING_FACE_API_KEY'  # Replace with your API key

@csrf_exempt
async def generate_response(request):
    if request.method == 'POST':
        try:
            data = json.loads(request.body)
            message = data.get('message', '')

            # Detect language
            detected_language = detect(message)
            logging.info(f"Detected language: {detected_language}")

            # Get appropriate models based on detected language
            model_names = MODEL_MAP.get(detected_language.lower())
            if not model_names:
                return JsonResponse({'error': f'No model available for detected language: {detected_language}'}, status=400)

            # Perform asynchronous requests
            responses = await asyncio.gather(*[fetch_response(model_name, message) for model_name in model_names])

            # Aggregate responses
            aggregated_response = ' '.join(responses)
            return JsonResponse({'response': aggregated_response})

        except Exception as e:
            logging.error(f"Error during request processing: {str(e)}")
            return JsonResponse({'error': str(e)}, status=500)

    return JsonResponse({'error': 'Invalid HTTP method'}, status=405)

async def fetch_response(model_name, message):
    """
    Helper function to fetch response from Hugging Face asynchronously.
    """
    headers = {
        'Authorization': f'Bearer {HUGGING_FACE_API_KEY}',
        'Content-Type': 'application/json'
    }
    api_url = f'https://api-inference.huggingface.co/models/{model_name}'
    
    async with aiohttp.ClientSession() as session:
        async with session.post(api_url, headers=headers, json={'inputs': message}) as response:
            if response.status == 200:
                result = await response.json()
                return result.get('generated_text', '')
            else:
                response_text = await response.text()
                logging.error(f"Error fetching from {model_name}: {response_text}")
                return ''

I have the above code and want to create a floating browser extension that automatically reads the last message in any chat site and automatically writes a response but doesn't send it. I have to send it manually. What is missing in my code and what do I need to do next. Please guide me in a beginner friendly manner