AI Chatbot Chrome Extension

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

Setting Up the Project on Replit

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.
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.
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

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>

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.

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.
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:

Click the extension icon in your Chrome toolbar.
A popup window will open with a text box to type a message.
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.

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 Example NextWhite Label (Your) Marketplace

Last updated 4 months ago

Step 1: Create manifest.json

Step 2: Build the User Interface in popup.html

Step 3: Writing the JavaScript Logic in popup.js

Step 4: Testing Locally in Chrome

Using the Extension

Optional: Adding Icons

Sharing the Project on Replit

Step 1: Create `manifest.json`

Step 2: Build the User Interface in `popup.html`

Step 3: Writing the JavaScript Logic in `popup.js`