AI Chatbot Chrome Extension

Creating a Chrome Extension to Communicate with Stammer's AI Chatbot API using Replit

Setting Up the Project on Replit

  1. Create a New Replit Project

    • Go to Replit and log in.

    • Click Create Repl.

    • Choose HTML, CSS, JS as the template, name your project, and click Create Repl.

  2. Organize Your Project Files

    • Inside Replit, create three main files:

      • manifest.json: Defines the extension’s properties.

      • popup.html: Builds the user interface for the extension.

      • popup.js: Manages the communication with the Stammer chatbot API.

  3. Building the Files

    1. Let’s go through each of these files and set up the code.

Step 1: Create manifest.json

In Replit, create a file named manifest.json. This file will define the Chrome extension’s settings and permissions.

{
  "manifest_version": 3,
  "name": "Stammer Chatbot",
  "version": "1.0",
  "description": "Send a message to the Stammer AI chatbot and get a response.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "permissions": [
    "storage",
    "activeTab",
    "scripting"
  ]
}

This configuration sets up:

  • The extension’s version and description

  • Points to popup.html as the popup interface

  • Defines required permissions like storage and access to the active tab

Step 2: Build the User Interface in popup.html

Create a file named popup.html in Replit. This file provides the UI for the extension’s popup window. It contains a text area where the user can type their message, a button to send the message, and a display area for the chatbot’s response.

<!DOCTYPE html>
<html>
  <head>
    <title>Chat with Stammer</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 10px;
        width: 300px;
      }
      textarea {
        width: 100%;
        height: 80px;
        margin-bottom: 10px;
      }
      button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
      #response {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h3>Send a Message to Stammer</h3>
    <textarea id="message" placeholder="Type your message here..."></textarea>
    <button id="sendMessage">Send Message</button>
    <div id="response"></div>

    <script src="popup.js"></script>
  </body>
</html>

Step 3: Writing the JavaScript Logic in popup.js

Create a file named popup.js in Replit. This script sends the user’s message to the Stammer API and displays the chatbot’s response.

document.getElementById('sendMessage').addEventListener('click', async () => {
  const message = document.getElementById('message').value;
  const responseDiv = document.getElementById('response');
  
  if (!message) {
    responseDiv.textContent = "Please type a message.";
    return;
  }

  responseDiv.textContent = "Sending...";

  const data = {
    chatbot_uuid: "12345678-1234-5678-1234-567812345678",  // Replace with actual chatbot UUID
    query: message,
    user_key: "user-unique-key"  // Replace with actual user key
  };

  try {
    const response = await fetch("https://app.stammer.ai/en/chatbot/api/v1/message/", {
      method: 'POST',
      headers: {
        'Authorization': 'Token <YOUR-API-TOKEN>',  // Replace with actual API token
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });

    if (response.ok) {
      const result = await response.json();
      responseDiv.textContent = result.data.answer;
    } else {
      const errorData = await response.json();
      responseDiv.textContent = `Error: ${errorData.message}`;
    }
  } catch (error) {
    responseDiv.textContent = `Error: ${error.message}`;
  }
});

This script:

  • Waits for the user to click the button

  • Sends the input message to the Stammer API

  • Displays the chatbot’s response or an error message if something goes wrong

Step 4: Testing Locally in Chrome

Since Chrome extensions can’t be run directly in Replit, you’ll need to download your files and test them in Chrome.

  1. Download the Project:

    • In Replit, go to the top menu, click on the three dots next to your project name, and select Download as ZIP.

    • Extract the ZIP file to a folder on your computer.

  2. Load the Extension in Chrome:

    • Open Chrome and go to chrome://extensions/.

    • Enable Developer mode by toggling the switch on the top right.

    • Click Load unpacked and select the folder where you extracted your extension files.

    • You should see your extension appear in the toolbar.

Using the Extension

Once your extension is loaded:

  1. Click the extension icon in your Chrome toolbar.

  2. A popup window will open with a text box to type a message.

  3. Click Send Message to interact with the chatbot. The response will appear below the text area.

Optional: Adding Icons

If you want to make the extension look nicer, you can add icons in different sizes:

  • icon16.png (16x16 pixels)

  • icon48.png (48x48 pixels)

  • icon128.png (128x128 pixels)

These icons will show up in the Chrome toolbar and extension settings.

Sharing the Project on Replit

If you want to share your extension code with others, you can make your Replit project public or invite collaborators directly. This way, team members can easily review or contribute to the code from their own accounts.

PreviousWhite Label API x Zapier X Slack ExampleNextWhite Label (Your) Marketplace

Last updated