🚀 Building GitLab Pipes: A React Browser Extension for Pipeline Monitoring

How I built a Chrome extension to monitor multiple GitLab CI/CD pipelines in one place

🔗 Chrome WebStore — GitLab Pipes

🔗 GitHub — sharathpc/gitlab-pipes

📋 Table of Contents

• The Problem
• The Solution
• Tech Stack
• Architecture Overview
• Key Features
• Demo Section
• Implementation Highlights
• Challenges & Solutions
• Future Roadmap
• Conclusion

🎯 The Problem

As a developer working with multiple GitLab repositories, I found myself constantly switching between browser tabs to check the status of different CI/CD pipelines. This was not only time-consuming but also made it easy to miss failed builds or stuck pipelines.

Common pain points:

• 🔄 Switching between multiple GitLab project tabs
• ⏰ Time wasted checking pipeline statuses manually
• 🚨 Missing failed builds due to lack of centralized monitoring
• 📱 No quick way to see pipeline status at a glance

💡 The Solution

GitLab Pipes — A lightweight browser extension that allows you to bookmark multiple GitLab projects and view their latest CI/CD pipeline statuses directly in your browser popup.

🎯 What it does:

• 🔖 Bookmark your favorite GitLab repositories
• 🟢 View real-time pipeline status for all projects
• ⚡ Quick access via browser extension popup
• 🔐 Secure authentication using GitLab Personal Access Token
• 📊 Visual pipeline stage breakdown

🛠 Tech Stack

Frontend:     React 17 + TypeScript
Styling:      Tailwind CSS + SCSS
API:          GitLab GraphQL API
Extension:    Chrome Extension Manifest V3
Build Tool:   Webpack 5
Package Manager: Yarn        

🏗 Architecture Overview

The extension follows a clean, modular architecture:

src/
├── components/          # React components
│   ├── Dashboard/      # Main dashboard view
│   ├── Pipeline/       # Pipeline display component
│   ├── Projects/       # Project management
│   └── Login/          # Authentication
├── pages/              # Extension pages
│   ├── Popup/          # Main popup interface
│   ├── Options/        # Settings page
│   └── Background/     # Background scripts
├── services.ts         # GitLab API integration
└── types.ts           # TypeScript definitions        

✨ Key Features

🔐 Secure Authentication

• Uses GitLab Personal Access Token (PAT)
• Token stored locally in browser storage
• Automatic token validation and refresh

📊 Pipeline Monitoring

• Real-time pipeline status updates
• Visual stage-by-stage breakdown
• Duration and completion time tracking
• User avatar and commit information

🎨 Modern UI/UX

• Clean, responsive design with Tailwind CSS
• Intuitive project bookmarking system
• Color-coded pipeline status indicators
• Smooth animations and transitions

🔄 Real-time Updates

• Automatic refresh of pipeline data
• Debounced API calls to prevent rate limiting
• Error handling and retry mechanisms

🎬 Demo Section

📦 Installation Process

• Loading the extension in Chrome
• First-time setup and authentication

➕ Adding Projects

• Searching for GitLab projects
• Bookmarking multiple repositories
• Project selection interface

👀 Pipeline Monitoring

• Opening the extension popup
• Viewing pipeline statuses
• Clicking through to detailed views
• Real-time status updates

✨ User Experience

• Smooth navigation between projects
• Pipeline stage breakdown
• Error handling and loading states

🔧 Implementation Highlights

GitLab GraphQL Integration

The extension uses GitLab’s GraphQL API for efficient data fetching:

export const getPipeLines = async (projectIds: any) => {
    const parseProjectIds = projectIds.map((item: string) => `"${item}"`).join(',');
    return await axiosRequest.post(`/graphql`, {
        query: `{
            projects(membership: true, ids: [${parseProjectIds}]) {
                nodes {
                    id
                    name
                    pipelines(first: 2) {
                        nodes {
                            id
                            status
                            duration
                            stages {
                                nodes {
                                    id
                                    name
                                    status
                                }
                            }
                        }
                    }
                }
            }
        }`
    })
}        

Pipeline Status Component

A reusable component for displaying pipeline information:

const PipelineComponent: React.FC<IProps> = ({ pipeline }) => {
  const secondsToTime = (e: number) => {
    const h = Math.floor(e / 3600).toString().padStart(2, '0'),
      m = Math.floor(e % 3600 / 60).toString().padStart(2, '0'),
      s = Math.floor(e % 60).toString().padStart(2, '0');
    return `${h}:${m}:${s}`;
  }

  return (
    <tr className="pipeline-section">
      <td>
        <PipelineStatus pipeline={pipeline} />
      </td>
      <td className="stage-cell">
        {pipeline.stages.map(stage =>
          <div key={stage.id} className="stage-container">
            <button className={`ci-status-icon-${stage.status}`}>
              <svg className="gl-icon s16">
                <use href={`${gitlabLogo}\#status_${stage.status}_borderless`}></use>
              </svg>
            </button>
          </div>
        )}
      </td>
      <td>
        <div className="flex items-center">
          <svg className="w-3 h-3">
            <use href={`${gitlabLogo}\#timer`} ></use>
          </svg>
          <div className="ml-2">{secondsToTime(pipeline.duration)}</div>
        </div>
      </td>
    </tr>
  );
};        

Chrome Extension Manifest V3

Modern extension architecture with proper security:

{
  "manifest_version": 3,
  "name": "GitLab Pipes",
  "version": "1.0.1",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "host_permissions": [
    "https://gitlab.com/*"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}        

🚧 Challenges & Solutions

1. GitLab API Rate Limiting ⚡

Challenge: GitLab has strict rate limits on API calls Solution: Implemented debounced API calls and efficient GraphQL queries to minimize requests

2. Extension Storage Limitations 💾

Challenge: Chrome extension storage has size limits Solution: Optimized data structure and implemented cleanup mechanisms

3. Cross-Origin Requests 🌐

Challenge: Browser security restrictions on API calls Solution: Used proper CORS headers and GitLab’s API endpoints

4. Real-time Updates 🔄

Challenge: Keeping pipeline data fresh without overwhelming the API Solution: Implemented smart refresh intervals and user-triggered updates

🗺 Future Roadmap

🚀 Planned Features

🔘 Manual Pipeline Triggers

• Trigger pipelines directly from the extension
• Cancel running pipelines

📱 Mobile-Friendly Design

• Responsive popup layout
• Touch-optimized interactions

🔍 Advanced Filtering

• Filter by project groups
• Status-based filtering
• Date range selection

☁️ Data Synchronization

• Sync bookmarks using GitLab snippets
• Cross-device synchronization

🔔 Notifications

• Browser notifications for failed pipelines
• Custom notification rules

🎯 Getting Started

Prerequisites

• GitLab account with Personal Access Token
• Chrome browser
• Node.js and Yarn

Installation Steps

• Clone the Repository

git clone https://github.com/sharathpc/gitlab-pipes.git
cd gitlab-pipes        

• Install Dependencies

yarn install        

• Build the Extension

yarn build        

Load in Chrome

• Open chrome://extensions
• Enable Developer Mode
• Click “Load Unpacked”
• Select the dist/ directory

Configure Authentication

• Click the extension icon
• Enter your GitLab Personal Access Token
• Start bookmarking projects!

📊 Impact & Results

Since building GitLab Pipes, I’ve experienced:

• ⏱️ 90% reduction in time spent checking pipeline statuses
• 🎯 Improved productivity with centralized monitoring
• 🚨 Faster response to failed builds
• 💡 Better workflow for managing multiple projects

🎉 Conclusion

Building GitLab Pipes has been an exciting journey into browser extension development and GitLab API integration. The project demonstrates how modern web technologies can solve real developer productivity problems.

Key Takeaways:

• 🛠️ Browser extensions are powerful tools for developer productivity
• 🔌 GitLab’s GraphQL API provides efficient data access
• 🎨 Modern React patterns work great in extension contexts
• 🔐 Security-first approach is crucial for API integrations

The extension is open-source and available on GitHub. Feel free to contribute, report issues, or suggest new features!

🔗 Links & Resources

• GitLab GraphQL API: docs.gitlab.com/ee/api/graphql
• Chrome Extension Docs: developer.chrome.com/docs/extensions
• React Documentation: reactjs.org

📂 The complete source code is available on GitHub: https://github.com/sharathpc/gitlab-pipes

🤝 Feel free to contribute, fork, or use this project as a reference for your own development!