Browser Extension

Chrome and Firefox extension for seamless workspace integration directly in your browser.

Overview

The Workspace Browser Extension provides quick access to workspace operations without leaving your browser. Built with TypeScript and featuring 41 comprehensive tools, it enables real-time workspace management through an intuitive browser interface.

Repository: /workspaces-browser-extension

Key Features

Comprehensive Workspace Operations

41 Tools covering all workspace functionality
Real-time GraphQL integration
Event-driven architecture for responsive UI
Background processing for performance

Browser Integration

Chrome and Firefox support
Browser action popup with quick access
Context menus for workspace operations
Notifications for real-time updates
Tab management integration

Developer-Friendly

TypeScript-based for type safety
Comprehensive testing with Jest
Webpack-based build system
Hot reload for development
Production-ready boilerplate

Technology Stack

Language: TypeScript 5.9.2
Build System: Webpack 5
Testing: Jest
API: GraphQL
Package Manager: npm

Installation

For Users

Chrome Web Store

Visit Chrome Web Store
Search for "Workspace Platform Extension"
Click "Add to Chrome"
Follow installation prompts

Firefox Add-ons

Visit Firefox Add-ons
Search for "Workspace Platform Extension"
Click "Add to Firefox"
Follow installation prompts

Manual Installation (Developer Mode)

Chrome:

Clone repository
cd /home/kruthika/Documents/Products/products/workspace/workspaces-browser-extension
npm install
npm run build
Open Chrome → Extensions → Enable "Developer mode"
Click "Load unpacked"
Select the `dist` directory

Firefox:

Follow steps 1-4 above
Open Firefox → Add-ons → Settings → "Debug Add-ons"
Click "Load Temporary Add-on"
Select `manifest.json` from `dist` directory

For Developers

Prerequisites

Node.js 20.x or higher
npm 10.x or higher
Chrome or Firefox browser

Setup Steps

Clone and navigate:

cd /home/kruthika/Documents/Products/products/workspace/workspaces-browser-extension

Install dependencies:

npm install

Configure environment:

cp .env.example .env
# Edit .env with your workspace credentials

Required environment variables:

WORKSPACE_API_URL=https://api.workspace-platform.ai
WORKSPACE_API_KEY=your_api_key_here
GRAPHQL_ENDPOINT=https://api.workspace-platform.ai/graphql

Development

Development Mode

# Start development server with hot reload
npm run dev

# Watch mode for continuous compilation
npm run watch

Building

# Production build
npm run build

# Build for specific browser
npm run build:chrome
npm run build:firefox

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

Usage

Click the extension icon in your browser toolbar to access:

Quick Actions
- Create workspace
- Search workspaces
- View recent activity
- Access settings
Workspace Dashboard
- Active workspaces list
- Member directory
- Team overview
- Project status
Notifications
- Real-time workspace updates
- Team activity alerts
- Mention notifications
- System messages

Right-click on any page to access:

Add to workspace
Share with team
Create project from page
Quick workspace search

Keyboard Shortcuts

Shortcut	Action
`Ctrl+Shift+W`	Open workspace popup
`Ctrl+Shift+S`	Quick search
`Ctrl+Shift+N`	Create new workspace
`Ctrl+Shift+P`	View projects

Available Tools

The extension provides 41 tools organized by category:

Workspace Management

Create, read, update, delete workspaces
List and search workspaces
Workspace settings and configuration
Workspace invitations

Member Management

Add and remove members
Update member roles and permissions
View member activity
Member directory search

Team Operations

Create and manage teams
Team member assignment
Team settings and permissions
Team activity tracking

Project Management

Create and update projects
Project task management
Milestone tracking
Project collaboration tools

Collaboration Features

Real-time notifications
Activity feeds
Comments and mentions
File sharing integration

Architecture

┌─────────────────────────────────────────┐
│      Browser Extension                  │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────────────────────────────────┐  │
│  │     Popup UI (React/Vue)         │  │
│  └──────────────────────────────────┘  │
│                 │                       │
│                 ▼                       │
│  ┌──────────────────────────────────┐  │
│  │    Event-Driven Architecture     │  │
│  │  • Background Script             │  │
│  │  • Content Scripts               │  │
│  │  • Message Passing               │  │
│  └──────────────────────────────────┘  │
│                 │                       │
│                 ▼                       │
│  ┌──────────────────────────────────┐  │
│  │   GraphQL Client (41 Tools)      │  │
│  └──────────────────────────────────┘  │
│                                         │
└─────────────────────────────────────────┘
                 │
                 ▼
      Workspace Platform API
       (GraphQL Endpoint)

Configuration

Extension Settings

Access settings via extension popup → Settings:

API Configuration
- API endpoint URL
- Authentication token
- Request timeout
Notifications
- Enable/disable notifications
- Notification frequency
- Quiet hours
Appearance
- Theme (light/dark)
- Icon style
- Popup size
Privacy
- Activity tracking
- Analytics
- Data sync

manifest.json

Key configuration in manifest.json:

{
  "name": "Workspace Platform Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": [
    "storage",
    "notifications",
    "contextMenus",
    "activeTab"
  ],
  "host_permissions": [
    "https://api.workspace-platform.ai/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

Code Examples

Background Script

// background.ts
import { GraphQLClient } from './graphql-client';

// Initialize GraphQL client
const client = new GraphQLClient({
  endpoint: process.env.GRAPHQL_ENDPOINT,
  apiKey: process.env.WORKSPACE_API_KEY
});

// Listen for extension messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'CREATE_WORKSPACE') {
    client.createWorkspace(message.data)
      .then(workspace => {
        sendResponse({ success: true, workspace });
      })
      .catch(error => {
        sendResponse({ success: false, error: error.message });
      });
    return true; // Indicates async response
  }
});

// Handle notifications
client.subscribeToUpdates((update) => {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icons/icon48.png',
    title: 'Workspace Update',
    message: update.message
  });
});

// popup.tsx
import React, { useState, useEffect } from 'react';
import { WorkspaceClient } from './client';

function WorkspacePopup() {
  const [workspaces, setWorkspaces] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch workspaces on popup open
    chrome.runtime.sendMessage(
      { type: 'LIST_WORKSPACES' },
      (response) => {
        if (response.success) {
          setWorkspaces(response.workspaces);
        }
        setLoading(false);
      }
    );
  }, []);

  const createWorkspace = async (name: string) => {
    chrome.runtime.sendMessage(
      {
        type: 'CREATE_WORKSPACE',
        data: { name, description: '' }
      },
      (response) => {
        if (response.success) {
          setWorkspaces([...workspaces, response.workspace]);
        }
      }
    );
  };

  return (
    <div className="workspace-popup">
      <h2>My Workspaces</h2>
      {loading ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {workspaces.map(workspace => (
            <li key={workspace.id}>{workspace.name}</li>
          ))}
        </ul>
      )}
      <button onClick={() => createWorkspace('New Workspace')}>
        Create Workspace
      </button>
    </div>
  );
}

Testing

Test Structure

tests/
├── unit/              # Unit tests for individual components
├── integration/       # Integration tests with API
└── e2e/              # End-to-end browser tests

Running Tests

# All tests
npm test

# Specific test suite
npm test -- workspace.test.ts

# With coverage
npm run test:coverage

Example Test

// workspace.test.ts
import { WorkspaceClient } from '../src/client';

describe('Workspace Operations', () => {
  let client: WorkspaceClient;

  beforeEach(() => {
    client = new WorkspaceClient({
      endpoint: 'https://api.workspace-platform.ai/graphql',
      apiKey: 'test_key'
    });
  });

  it('should create workspace', async () => {
    const workspace = await client.createWorkspace({
      name: 'Test Workspace',
      description: 'Test'
    });

    expect(workspace.id).toBeDefined();
    expect(workspace.name).toBe('Test Workspace');
  });

  it('should list workspaces', async () => {
    const workspaces = await client.listWorkspaces();
    expect(Array.isArray(workspaces)).toBe(true);
  });
});

Troubleshooting

Common Issues

Issue: Extension not loading

Solution:
Check manifest.json for syntax errors
Verify all required permissions
Check browser console for errors
Rebuild extension: npm run build

Issue: API connection failures

Solution:
Verify API endpoint in .env
Check API key validity
Confirm host_permissions in manifest.json
Check network tab for CORS errors

Issue: Tests failing

Solution:
Clear node_modules and reinstall: rm -rf node_modules && npm install
Check Jest configuration
Verify test environment variables
Run tests with --verbose flag

Best Practices

✅ Use TypeScript for type safety ✅ Implement proper error handling ✅ Cache API responses when appropriate ✅ Minimize background script activity ✅ Use message passing efficiently ✅ Implement proper logging ✅ Test across multiple browsers ✅ Follow extension security guidelines

Performance

Popup Load Time: Under 500ms
API Request Time: 100-300ms
Background Processing: Minimal impact
Memory Usage: ~50MB
Update Frequency: Real-time via GraphQL subscriptions

Security

API keys stored securely in browser storage
HTTPS-only API communication
Content Security Policy enforcement
Minimal permissions requested
No third-party data sharing
Regular security audits

Browser Compatibility

Browser	Minimum Version	Status
Chrome	88+	✅ Fully supported
Edge	88+	✅ Fully supported
Firefox	90+	✅ Fully supported
Safari	15+	⚠️ Partial support
Opera	74+	✅ Fully supported

Support

Repository: /workspaces-browser-extension
Issues: GitHub Issues
Chrome Web Store: [Link]
Firefox Add-ons: [Link]
Email: [email protected]

Overview​

Key Features​

Comprehensive Workspace Operations​

Browser Integration​

Developer-Friendly​

Technology Stack​

Installation​

For Users​

Chrome Web Store​

Firefox Add-ons​

Manual Installation (Developer Mode)​

For Developers​

Prerequisites​

Setup Steps​

Development​

Development Mode​

Building​

Testing​

Usage​

Browser Popup Interface​

Context Menu Integration​

Keyboard Shortcuts​

Available Tools​

Workspace Management​

Member Management​

Team Operations​

Project Management​

Collaboration Features​

Architecture​

Configuration​

Extension Settings​

manifest.json​

Code Examples​

Background Script​

Popup Component​

Testing​

Test Structure​

Running Tests​

Example Test​

Troubleshooting​

Common Issues​

Best Practices​

Performance​

Security​

Browser Compatibility​

Related Documentation​

Support​

Overview

Key Features

Comprehensive Workspace Operations

Browser Integration

Developer-Friendly

Technology Stack

Installation

For Users

Chrome Web Store

Firefox Add-ons

Manual Installation (Developer Mode)

For Developers

Prerequisites

Setup Steps

Development

Development Mode

Building

Testing

Usage

Browser Popup Interface

Context Menu Integration

Keyboard Shortcuts

Available Tools

Workspace Management

Member Management

Team Operations

Project Management

Collaboration Features

Architecture

Configuration

Extension Settings

manifest.json

Code Examples

Background Script

Popup Component

Testing

Test Structure

Running Tests

Example Test

Troubleshooting

Common Issues

Best Practices

Performance

Security

Browser Compatibility

Related Documentation

Support