A Chrome extension that allows you to bookmark multiple GitLab projects and monitor their CI/CD pipeline statuses in one place.
🔗 Live Demo:
- 🔖 Bookmark multiple 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
- 🔄 Automatic refresh of pipeline data
- Frontend: React 17 + TypeScript
- Styling: Tailwind CSS + SCSS
- API: GitLab GraphQL API
- Extension: Chrome Extension Manifest V3
- Build Tool: Webpack 5
- Package Manager: Yarn
- GitLab account with Personal Access Token
- Chrome browser
- Node.js and Yarn
- 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!
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
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
}
}
}
}
}
}
}`
})
}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>
);
};- Challenge: GitLab has strict rate limits on API calls
- Solution: Implemented debounced API calls and efficient GraphQL queries
- Challenge: Chrome extension storage has size limits
- Solution: Optimized data structure and implemented cleanup mechanisms
- Challenge: Browser security restrictions on API calls
- Solution: Used proper CORS headers and GitLab's API endpoints
- Challenge: Keeping pipeline data fresh without overwhelming the API
- Solution: Implemented smart refresh intervals and user-triggered updates
- Manual pipeline trigger button
- Mobile-friendly popup layout
- Project group filters
- Token and bookmarks sync using GitLab snippets
- Browser notifications for failed pipelines
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.