Slack Share Extension

A Chrome/Chromium extension that lets you share URLs and screenshots to Slack with one click. Perfect for teams who need to quickly share interesting finds, report issues, or collaborate on web content.

Features

• 📸 One-click sharing - Share the current page URL with a screenshot to Slack
• 📢 Dynamic channels - Fetches available channels from your Slack workspace
• 💬 Optional notes - Add a personal note to your shares
• 🌙 Dark mode - Light and dark themes
• ⌨️ Keyboard shortcut - Quick share with Ctrl+Shift+S (configurable)
• 🖱️ Context menu - Right-click to share (optional)
• 🔒 Secure - Bot token stored server-side in Cloudflare Worker
• 🌐 Cross-browser - Works on Chrome, Vivaldi, Edge, Brave, and other Chromium browsers

Architecture

┌──────────────────┐      ┌─────────────────────┐      ┌─────────────┐
│  Browser         │      │  Cloudflare Worker  │      │  Slack API  │
│  Extension       │ ───► │  (your deployment)  │ ───► │             │
│                  │      │                     │      │             │
│ • Captures URL   │      │ • Holds Bot Token   │      │ • Receives  │
│ • Takes screenshot│     │ • Validates request │      │   message   │
│ • Sends to worker│      │ • Uploads to Slack  │      │ • Stores    │
└──────────────────┘      └─────────────────────┘      │   file      │
                                                       └─────────────┘

The Cloudflare Worker acts as a secure proxy, keeping your Slack Bot Token safe on the server side rather than exposing it in the browser extension.

Quick Start

Prerequisites

1. Slack App with a Bot Token and required scopes
2. Cloudflare Account (free tier works)
3. Node.js (v18+)

1. Create a Slack App

1. Go to api.slack.com/apps and click Create New App
2. Choose From scratch, give it a name, and select your workspace
3. Go to OAuth & Permissions and add these Bot Token Scopes:
   • chat:write - Post messages
   • files:write - Upload screenshots
   • channels:read - List public channels
   • groups:read - List private channels (optional)
4. Click Install to Workspace and authorize
5. Copy the Bot User OAuth Token (starts with xoxb-)

2. Deploy the Cloudflare Worker

# Clone this repository
git clone https://github.com/AudienseCo/slack-share-extension.git
cd slack-share-extension/worker

# Install dependencies
npm install

# Login to Cloudflare
npx wrangler login

# Set your secrets
npx wrangler secret put SLACK_BOT_TOKEN    # Paste your xoxb-... token
npx wrangler secret put API_KEY            # Generate one: openssl rand -hex 32

# Deploy
npm run deploy

Note the worker URL (e.g., https://slack-share-proxy.your-subdomain.workers.dev)

3. Generate Extension Icons

Open extension/icons/generate-icons.html in a browser and download the icons, OR:

cd extension/icons
npm install canvas
node create-icons.js

4. Install the Extension

1. Open chrome://extensions/ (or vivaldi://extensions/, edge://extensions/)
2. Enable Developer mode
3. Click Load unpacked
4. Select the extension folder

5. Configure

1. Click the extension icon
2. Go to Settings
3. Enter your Worker URL and API Key
4. Test the connection
5. Select your default channel

Configuration

Worker Configuration

Edit worker/wrangler.toml to customize:

[vars]
DEFAULT_CHANNEL = "general"  # Your default channel name

Extension Settings

Available in the Options page:

Setting	Description
Worker URL	Your deployed Cloudflare Worker URL
API Key	The API key you set when deploying
Default Channel	Pre-selected channel when sharing
Context Menu	Enable/disable right-click "Share to Slack"
Theme	Light or Dark mode

Usage

Method 1: Popup

Click the extension icon → Select channel → Add optional note → Share

Method 2: Keyboard Shortcut

Press Ctrl+Shift+S (or Cmd+Shift+S on Mac) for instant share to default channel

Method 3: Context Menu

Right-click → "Share to Slack" for instant share to default channel

Distributing to Your Team

Option A: Share the Extension Folder

1. Customize defaults in the code if desired (worker URL, default channel)
2. Generate icons
3. Zip the extension folder
4. Share with your team along with the INSTALL.md guide

Option B: Pre-configure for Your Org

Edit the DEFAULT_SETTINGS in extension/background.js, popup.js, and options.js:

const DEFAULT_SETTINGS = {
  workerUrl: 'https://your-worker.your-subdomain.workers.dev',
  apiKey: '', // Leave empty for users to enter, or pre-fill
  defaultChannel: 'your-channel',
  // ...
};

Development

Local Worker Development

cd worker
npm run dev

Starts a local worker at http://localhost:8787

Extension Development

After making changes:

1. Go to chrome://extensions/
2. Click the refresh icon on the extension

Security Considerations

• Bot Token: Stored securely in Cloudflare Worker secrets, never exposed to browsers
• API Key: Provides basic authentication between extension and worker
• Permissions: Extension only requests minimal permissions needed

For additional security:

• Use a strong, randomly generated API key
• Consider adding IP allowlisting to your Cloudflare Worker
• Regularly rotate your API key and Slack token

Troubleshooting

"Failed to capture screenshot"

Some pages don't allow screenshots (chrome:// pages, some secure sites). Try a regular webpage.

"Failed to load channels"

Ensure your Slack bot is invited to the channels and has channels:read scope.

"Invalid API key"

Check that the API key in extension settings matches what you set in the worker.

"Connection failed"

Verify the Worker URL is correct and the worker is deployed.

File Structure

slack-share-extension/
├── extension/
│   ├── manifest.json      # Chrome Extension Manifest V3
│   ├── background.js      # Service worker
│   ├── popup.*            # Share popup UI
│   ├── options.*          # Settings page
│   └── icons/             # Extension icons
├── worker/
│   ├── wrangler.toml      # Cloudflare config
│   ├── package.json       # Dependencies
│   └── src/index.js       # Worker code
├── INSTALL.md             # User installation guide
├── LICENSE                # MIT License
└── README.md              # This file

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Created by Tasteray