{"id":18860934,"url":"https://github.com/linqlover/chrome-reqtracer","last_synced_at":"2026-02-09T06:30:16.312Z","repository":{"id":261000594,"uuid":"881156573","full_name":"LinqLover/chrome-reqtracer","owner":"LinqLover","description":"A simple Chrome extension for tracing the network requests of tabs. Implementation for an application test task. No groundbreaking innovation here (yet) :)","archived":false,"fork":false,"pushed_at":"2024-11-04T05:24:39.000Z","size":289,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-30T20:25:46.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinqLover.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-31T02:09:33.000Z","updated_at":"2024-11-04T05:24:16.000Z","dependencies_parsed_at":"2024-11-04T06:35:04.833Z","dependency_job_id":null,"html_url":"https://github.com/LinqLover/chrome-reqtracer","commit_stats":null,"previous_names":["linqlover/chrome-reqtracer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinqLover%2Fchrome-reqtracer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinqLover%2Fchrome-reqtracer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinqLover%2Fchrome-reqtracer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinqLover%2Fchrome-reqtracer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinqLover","download_url":"https://codeload.github.com/LinqLover/chrome-reqtracer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239800405,"owners_count":19699129,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T04:27:16.046Z","updated_at":"2026-02-09T06:30:16.234Z","avatar_url":"https://github.com/LinqLover.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chrome ReqTracer\n\nA simple Chrome extension for tracing the network requests of tabs. Implementation for an application test task.\n\nUses TypeScript, vite, Chrome Extension API, React, Bootstrap, Font Awesome, AG-Grid, Playwright, and GitHub Actions for testing.\n\n*Discover how many places your favorite websites are calling home!* \n\n![screenshot.png](screenshot.png)\n\n## Installation\n\n1. Go to the [releases section](https://github.com/LinqLover/chrome-reqtracer/releases), download `chrome-reqtracer.zip` from the latest release, and extract it in a permanent location.\n2. In Chrome, go to [chrome://extensions/](chrome://extensions/) and ensure \u003ckbd\u003eDeveloper mode\u003c/kbd\u003e in the top right corner is enabled.\n3. Click \u003ckbd\u003eLoad unpackaged\u003c/kbd\u003e in the top left corner and choose the extracted directory.\n4. Voilà, you can now find the **Chrome ReqTracer** in the extensions menu at the top right corner of Chrome! Optionally, you can right-click it to pin it next to the address bar.\n\n## Usage\n\nBrowse and interact with any website you like and watch how the counter of traced requests increases. Requests are always traced for all tabs and displayed lively for the active tab.\n\nYou can click on the extension icon to view a list of all successful requests.\n\n- Use the broom icon (🧹) to clear the list and reset the counter.\n- You click on table headers to change the sorting of requests, resize table columns, or filter the requests through the available options.\n- As the current tab performs further web requests (e.g., when hovering the \"I'm feeling lucky\" button of Google at the time of writing), the list will automatically update.\n\n## Settings (experimental)\n\nSome settings for the extension can be configured in [`src/settings.ts`](./src/settings.ts). Please refer to the comments in the file for more information. In the future, these settings might be exposed to the user through the popup or an options page.\n\n## Development\n\n### Setup\n\n```bash\nnpm install\n```\n\n### Building\n\n```bash\nnpm run build\n\n# Or for continuous building\n# npm run watch\n```\n\n### Testing\n\n```bash\nnpx playwright install\nnpm run test\n```\n\n## Package Structure\n\n- [`.github/workflows/`](./.github/workflows/): GitHub Actions for CI/CD.\n- [`assets/`](./assets/): Icons.\n- [`src/`](./src/): Source code of the extension.\n    - [`popup/`](./src/popup/): React components for the popup.\n      - [`App.tsx`](./src/popup/App.tsx): Main component of the popup.\n      - [`RequestList.tsx`](./src/popup/RequestList.tsx): Component for the list of requests.\n\t- [`types/`](./src/types/): Utility type definitions.\n\t- [`background.ts`](./src/background.ts): Background worker of the extension. Traces web requests, updates the extension badge, and communicates with popups.\n\t- [`popup.html`](./src/popup.html): HTML entry point of the popup.\n\t- [`popup.tsx`](./src/popup.tsx): React entry point of the popup. Displays the list of requests.\n\t- [`support.ts`](./src/support.ts): Type definitions and utility functions for communication between the background worker and popups.\n- [`src-minimal/`](./src-minimal/): Minimal version of the extension to demonstrate simplicity. Excludes popups, types, and debugging support. No build required.\n- [`tests/`](./tests/): Playwright tests.\n\t- [`fixtures/`](./tests/fixtures/): Test fixtures.\n\t\t- [`resources/simpleDataLoader/`](./tests/fixtures/resources/simpleDataLoader/): A simple HTML/JS page that loads data.\n\t\t- [`SimpleDataLoader.ts`](./tests/fixtures/SimpleDataLoader.ts): POM for the simple data loader.\n\t\t- [`SimpleDataLoader.spec.ts`](./tests/fixtures/SimpleDataLoader.spec.ts): Playwright test for the simple data loader.\n\t- [`objects/`](./tests/objects/): POMs/object models for the extension.\n\t\t- [`ExtensionInfo.ts`](./tests/objects/ExtensionInfo.ts): Object model for the extension icon (not actually a POM but in the same vein).\n\t\t- [`ExtensionPopup.ts`](./tests/objects/ExtensionPopup.ts): Object model for the extension popup.\n\t- [`vendor/`](./tests/vendor/): Vendor scripts for Playwright.\n\t- [`extension.spec.ts`](./tests/extension.spec.ts): Playwright test for the extension.\n\t- [`fixtures.ts`](./tests/fixtures.ts): Playwright test fixtures.\n- [`manifest.json`](./manifest.json): Metadata of the extension.\n- [`vite.config.ts`](./vite.config.ts): Vite configuration for building TypeScript and React.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinqlover%2Fchrome-reqtracer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinqlover%2Fchrome-reqtracer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinqlover%2Fchrome-reqtracer/lists"}