GitHub - NKMAK/chrome-extension-webhook-sender

2 min read Original article ↗

A Chrome extension that allows you to quickly send the current page URL, title, and custom messages to Discord or Slack webhooks with a simple click.

👀 Demo

webhook-sender-demo

✨ Features

  • Webhook Support: Store and manage Discord and Slack webhook URLs
  • Current Page Integration: Automatically includes current page title and URL in messages
  • Context Menu Integration: Right-click on any page to quickly access the extension

🚀 Quick Start

Prerequisites

  • Node.js 18+ and npm
  • Google Chrome browser

Development Setup

  1. Clone the repository

    git clone https://github.com/NKMAK/chrome-extension-webhook-sender.git
cd chrome-extension-webhook-sender

  2. Install dependencies

  3. Environment Setup

    Create a .env file in the project root:

    # Storage key for webhook data in chrome.storage.sync
VITE_WEBHOOK_STORAGE_KEY=webhook_sender_unique_key
    • VITE_WEBHOOK_STORAGE_KEY: Unique identifier for storing webhook data in Chrome's sync storage

  4. Build the extension

  5. Install extension locally in Chrome

    • Open Chrome and navigate to chrome://extensions/
    • Enable "Developer mode" (toggle in top right)
    • Click "Load unpacked" and select the dist folder

Development Server

The development server provides hot reload for faster development.

📖 How to Use

1. Setting Up Webhooks

  1. Click the extension icon in your browser toolbar
  2. Navigate to the "Settings" tab
  3. Add your webhook URLs:
    • Discord
    • Slack
  4. Give each webhook a descriptive name for easy identification

2. Sending Messages

  1. Via Extension Popup:

    • Click the extension icon
    • Select your desired webhook from the dropdown
    • Type your message
    • Click "Send"

  2. Via Context Menu:

    • Select text on any webpage and right-click
    • Choose "webhook-sender" from the context menu
    • The extension will open with the selected text pre-filled in the message field

3. Message Format

Messages automatically include:

  • Your custom message text
  • Current page title
  • Current page URL

Example output:

Your custom message here

Title: GitHub - NKMAK/chrome-extension-webhook-sender
URL: https://github.com/NKMAK/chrome-extension-webhook-sender

🛠 Tech Stack

  • Framework: React 19 + TypeScript
  • Build Tool: Vite + CRXJS (Chrome Extension plugin)
  • UI Library: Chakra UI v3
  • Extension API: Chrome Manifest V3
  • Storage: chrome.storage.sync (syncs across devices)

🔧 Available Scripts

  • npm run dev - Start development server with hot reload
  • npm run build - Build for production
  • npm run lint - Run ESLint
  • npm run preview - Preview production build

🐛 Issues

open an issue on GitHub.