GCP APIs: Custom Date & Request Total

Choose a custom date range on the GCP APIs & Services dashboard and see the total of all API requests for that period.

Choose a custom date range on the GCP APIs & Services dashboard and see the total of all API requests for that period. 📊🗓️ GCP APIs: Custom Date & Request Total 🔍 A Chrome extension for the Google Cloud **APIs & Services** dashboard that lets you choose a **custom date range** (and console presets) and see the **total of all API requests** for that period—without leaving the page. 🚀 Features ✨ - **Custom date range** – Pick any start/end date and apply it to the GCP APIs dashboard in one click (the main feature not available in the console by default). ✅ - **Console presets** – Same ranges as the console: 1h, 6h, 12h, 1d, 2d, 4d, 7d, 14d, 30d, plus **Custom** (highlighted in the UI). 📅 - **Total requests** – Reads the Requests column from the dashboard table, sums all APIs, and shows: - **In the popup** – "Total requests (this period)" with a Refresh button. 🔄 - **On the page** – A blue badge in the top-right with the same total. 🏷️ - **Heartbeat** – While the popup is open on the dashboard, the extension polls every 5 seconds and stops when the total is stable (last 3 fetches match). A **green pulsing dot** means "updating"; a **red dot** means "idle". 💓 - **Account & project preserved** – Applying a date range keeps your current `authuser` and `project` in the URL. 🔒 - **Sync with console** – If you change the range in the console (e.g. 14 days), the extension reflects it when you open the popup. 🔄 - **Overlay off-dashboard** – When you open the extension on a non-GCP URL, an overlay explains that you need to be on the APIs dashboard and provides a link to open it. 📱 Quick start ⚡ From Chrome Web Store 🛒 1. Open the [Chrome Web Store](https://chrome.google.com/webstore) and search for **GCP APIs** or **Custom Date Request Total**. 2. Click **Add to Chrome** and confirm permissions. Manual installation (developers) 💻 1. **Clone the repo** ```bash git clone https://github.com/vikashsparxit/gcp-api-date-picker.git cd gcp-api-date-picker ``` 2. **Load in Chrome** - Go to `chrome://extensions/` - Turn on **Developer mode** (top right) - Click **Load unpacked** and select the extension folder 3. **Use it** - Open [Google Cloud Console → APIs & Services](https://console.cloud.google.com/apis/dashboard) - Click the extension icon - Choose a preset (e.g. 30d) or **Custom** and set start/end dates - Click **Apply Date Range** - See **Total requests (this period)** in the popup and on the page (blue badge) 🎉 Project structure 📁 ``` gcp-api-date-picker/ ├── manifest.json # Extension config (MV3), permissions, content scripts ├── popup.html # Popup UI (presets, date inputs, total requests, overlay) ├── popup.js # Popup logic, URL building, heartbeat, storage ├── content.js # Injects "Custom Date Range" button + total-requests badge on dashboard ├── getTotalRequests.js # Sums Requests column from visible tables/grids on the page ├── style.css # Styles for injected dashboard UI ├── icons/ # Extension icons (16, 48, 128) ├── README.md └── LICENSE # MIT ``` How it works ⚙️ - **Date range** – The GCP console encodes the range in the `pageState` query parameter (e.g. `groupValue` for presets like `P30D`, or `customValue` with `start`/`end`). The extension builds this URL, keeps `authuser` and `project`, and navigates the tab so the dashboard reloads with the new range. - **Total requests** – A content script runs on the APIs dashboard, finds tables/grids with a "Requests" column, sums the values (preferring the table with the most data rows), and optionally uses a higher "Total requests: N" from the page when present. The result is shown in the on-page badge and sent to the popup on request; the popup also runs a heartbeat (poll every 5s, stop when stable) and shows a green/red status dot. Permissions 🔐 - **`storage`** – Store last-used dates and preferences. - **`tabs`** – Detect the active tab and update its URL when applying a date range. - **`host_permissions`: `https://console.cloud.google.com/*`** – Run only on the Cloud Console. No external servers; everything runs in your browser. 🌐 Troubleshooting 🛠️ | Issue | What to try | |-------|-------------| | Extension doesn't do anything | Make sure the current tab is `console.cloud.google.com/apis/dashboard`. | | Total requests wrong or stale | Click **Refresh** in the popup, or wait for the heartbeat (green dot) to settle. | | Wrong account/project after Apply | This build keeps `authuser` and `project` from the current URL; if it still switches, open the dashboard in the correct account first, then use the extension. | | No blue badge on page | Reload the APIs dashboard and open the extension again; the badge is injected by the content script. | Contributing 🤝 1. Fork the repo. 2. Create a branch: `git checkout -b feature/your-feature`. 3. Commit: `git commit -am 'Add feature'`. 4. Push: `git push origin feature/your-feature`. 5. Open a Pull Request. Ideas: more date presets, dark theme, i18n, or improving total-requests detection for future console UI changes. 💡 License 📄 MIT – see [LICENSE](LICENSE). Author 👨‍💻 **Vikash Sparxit** GitHub: [@vikashsparxit](https://github.com/vikashsparxit) For bugs or feature requests, open an issue on [GitHub Issues](https://github.com/vikashsparxit/gcp-api-date-picker/issues). 🐛