# AI Chatbot Chrome Extension
Setting Up the Project on Replit
1. **Create a New Replit Project**
* Go to [Replit](https://replit.com/) 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.
```
Chat with Stammer
Send a Message to Stammer
```
#### 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 ', // 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.
####