Content
# 🚀 ChatOps++ — Chrome Extension (Manifest V3)
[](https://chrome.google.com/webstore/devconsole/)
[]()
[]()
**ChatOps++** is a powerful Chrome extension designed to optimize and increase productivity by up to 1000% for users of Mattermost at `https://chat.runsystem.vn`. The extension adds features for task management, note-taking, advanced search, and quick reply shortcuts.
## ✨ Key Features
### 🎯 1. Task Management
* Create tasks quickly from any message on Mattermost.
* Set reminders through integrated Chrome Alarms with convenient push notifications.
* Manage task status (Pending, In Progress, Done) with an intuitive interface.
* Supports **Group Reminder**: Automatically sends reminder messages to Mattermost channels/groups at pre-configured times, supporting text formatting (bold, italic, code, quotes, strikethrough) and direct member tagging.
### 📒 2. Quick Notes (Notes/Memos)
* Store important notes from messages or write quickly.
* Categorize notes by topic/project for easy searching.
* Supports smart cloud synchronization via `chrome.storage.sync` (chunking data to overcome Google's 8KB limit).
* Integrates **Quick Template Picker**, **Quick Task Creator**, and **Quick Google Meet Creation**: Allows quick insertion of note templates (icon `📒`), creation of tasks (icon `🎯` pre-fill content), or quick creation of Google Meet rooms (using Google Meet SVG logo, automatically opens a new tab for a valid meeting and inserts the link into the chat frame) directly from the Mattermost chat box (main chat frame & reply).
### 🔍 3. Advanced Search
* Search for posts by multiple combined filters: keywords, sender, specific channel, and time range.
* Detailed search result interface for direct navigation to the original post.
* Integrates the `🔍` icon in the header for quick access to the advanced search interface in modal form.
### 🔔 4. Mentions Tracker
* Automatically scans and lists all unread mentions (`@mentions`) across channels to ensure you never miss important messages.
* Integrates the `🔔` icon in the header for quick access to the mentions tracker interface in modal form.
### 🖼️ 5. Image Library & Giphy
* Integrates a customizable meme image library.
* Direct connection to Giphy API for quick GIF searching and sending.
* Basic image editor with **freehand drawing from uploaded images or pasted from clipboard**.
* Adds a **Files & Images (Files)** tab for separate management (with navigation header shortcut) allowing smooth searching by name and pagination.
### 🔥 6. Quick Reactions
* Allows spamming reactions on posts.
* Emoji reaction cloning from one post to another.
* Withdrawal of all personal reactions with one action.
## 🛠️ Technologies Used
* **Core:** HTML, Vanilla CSS, JavaScript ESM (ES Modules).
* **Architecture:** Chrome Extension Manifest V3.
* **Service Worker (Background):** Manages cookie sync, reminder alarms, and Side Panel navigation.
* **Content Scripts:** Safely injects into Mattermost DOM, using React Fiber Bridge for direct interaction with the chat interface.
* **Side Panel UI:** Provides a native panel for parallel interaction while working.
* **Integrated Libraries:** `flatpickr` (Date Picker), `gifenc` (GIF encoder).
## 📂 Project Structure
```
chatops_mcp/
└── chrome-extension/
├── manifest.json # Permissions, scripts, and MV3 configuration
├── package.json # Project metadata
├── content/ # Content Scripts (run directly on Mattermost)
│ ├── content.js # Mattermost main interface handling logic
│ └── content.css # Styles for UI components injected into the page
├── sidepanel/ # Chrome side panel interface
│ ├── sidepanel.html # Main interface of the utility
│ └── tabs/ # Logic handling for each Tab (Tasks, Memo, ...)
└── src/ # Shared ESM logic directory
├── background.js # Main Service Worker
├── api/ # Mattermost API calls
└── utils/ # Utility functions for formatting, time, etc.
```
## 💻 Development & Local Installation Guide
To test or develop the extension on your local machine, follow these steps:
### 1. Clone the Repository
Clone the repository:
```bash
git clone https://github.com/nguyendinhhan98/mcp-chatops.git
cd mcp-chatops/chrome-extension
```
### 2. Install on Chrome
1. Open Google Chrome and navigate to: `chrome://extensions/`.
2. Enable **Developer mode** at the top right.
3. Click **Load unpacked** at the top left.
4. Select the `chrome-extension` folder in your project directory.
5. The **ChatOps++** icon will appear on the Chrome toolbar.
### 3. Initial Configuration
1. Access your company's Mattermost page at: `https://chat.runsystem.vn` and log in.
2. Open the **Side Panel** of ChatOps++ by clicking the extension icon or the toggle button added directly to the Mattermost interface.
3. Go to the **Settings** tab to configure:
* Interface, main color, tab display order.
## 🔒 Privacy Policy
Your data is completely secure. See details in [PRIVACY_POLICY.md](./PRIVACY_POLICY.md).
* ChatOps++ handles all information (notes, tasks, settings) **locally on your machine** via `chrome.storage.local`.
## 📝 Contribution
For contributions, bug reports, or new feature requests:
1. Create an **Issue** on this repository.
2. Or submit patches via **Pull Request**.
See detailed guidelines for developers in [AGENTS.md](./AGENTS.md).
