A Chrome side panel extension for viewing and editing Azure DevOps work item effort hours — right from your browser.
| Work Items (Dark Mode) | Expanded Details |
|---|---|
 |
 |
- Side panel UI — opens alongside your current tab, no context switching
- Inline editing — click Remaining or Completed hours to update directly, saves to Azure DevOps instantly
- Keyboard navigation — Tab, Shift+Tab, and arrow keys to move between editable cells
- Copy work item links — hover over a card and click the 🔗 button to copy the link; Ctrl/Cmd+click copies just the #ID
- Expand details — click the arrow on any card to see State, Type, Priority, Assigned To, Iteration, Area, and Description
- Double-click to open — double-click a card to open the work item in Azure DevOps
- Search — filter work items by ID or title
- Filter by type & iteration — quickly narrow down to Tasks, Bugs, Stories, etc.
- Colour coding — green/amber/red/blue indicators based on remaining hours vs estimate
- Dark mode — toggle between light and dark themes, preference is saved
- Keyboard shortcuts — press
Rto refresh work items - Hover tooltips — hover over any card for a quick summary of all fields
- PAT authentication — securely stored in Chrome sync storage
- Clone or download this repository
- Open
chrome://extensions/in Chrome - Enable Developer mode (top right)
- Click Load unpacked and select the
devops-timesheetfolder - Pin the extension by clicking the puzzle piece icon in the toolbar and pinning My DevOps Timesheet
After installation, click the extension icon in the toolbar to open the side panel. A setup wizard will guide you through connecting to your Azure DevOps project.
The wizard offers two ways to get started:
- Click Get Started to enter your details step by step
- Or paste your Azure DevOps URL (e.g.
https://dev.azure.com/my-org/my-project) to auto-fill the organization and project, skipping straight to the PAT step
URL shortcut: Copy any URL from your Azure DevOps browser tab and paste it into the URL field. The extension will extract the org and project for you.
Enter your Azure DevOps organization name. This is the part after dev.azure.com/ in your URL.
Enter the name of the Azure DevOps project you want to track work items from.
Create a Personal Access Token (PAT) and paste it in. The wizard includes an expandable guide if you need help creating one.
- Go to
https://dev.azure.com/{your-org}/_usersettings/tokens - Click New Token
- Give it a name and set an expiration date
- Under Scopes, select Work Items → Read & Write
- Click Create and copy the token
- Paste the token into the wizard and click Save & Connect
Your work items will load automatically. Settings are synced across your Chrome browsers via chrome.storage.sync.
- Edit hours — click any Remaining or Completed value, type a new number, press Enter
- Keyboard navigation — use Tab/Shift+Tab to move between cells, arrow keys to navigate across cards
- Copy link — hover over a card to reveal the 🔗 button, click to copy the full URL to the work item
- Copy ID only — Ctrl+click (Cmd+click on Mac) the 🔗 button to copy just
#12345format - Expand details — click the triangle arrow next to the ID to reveal full work item details
- Expand/Collapse all — use the toolbar button to toggle all detail panels at once
- Open in DevOps — double-click a card to open it in a new tab
- Search — type in the search box to filter by ID or title
- Filter — use the Type and Iteration dropdowns in the toolbar
- Refresh — click the refresh button in the header, or press
R - Dark mode — click the moon/sun icon in the header
- Settings — click the gear icon to change org, project, or PAT
- Manifest V3 Chrome Extension
- Plain HTML / CSS / JavaScript — no build tools
- Azure DevOps REST API (WIQL + Work Items)
manifest.json Chrome extension manifest
background.js Opens side panel on toolbar icon click
sidepanel.html Side panel markup
sidepanel.css Styles with light/dark mode
sidepanel.js State machine, API calls, rendering, inline editing
icons/ Extension icons (16, 48, 128px)
- Multi-project support — connect multiple Azure DevOps projects and view work items from all of them in one place
- Project filter — filter work items by project using the new toolbar dropdown, or select "All Projects" to see everything
- Project badges — each work item card now shows which project it belongs to
- Project management UI — add and delete projects from within the extension
- Back to Projects navigation — easily return to project management from the wizard
- Migration support — existing single-project setups are automatically migrated to the new multi-project format
- Initial release
MIT