AI Chatbot Chrome Extension
Creating a Chrome Extension to Communicate with Stammer's AI Chatbot API using Replit
Last updated
Creating a Chrome Extension to Communicate with Stammer's AI Chatbot API using Replit
Last updated
Setting Up the Project on Replit
Create a New Replit Project
Go to 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
Let’s go through each of these files and set up the code.
manifest.json
In Replit, create a file named manifest.json
. This file will define the Chrome extension’s settings and permissions.
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
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.
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.
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
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.
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.
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.