{"id":19926711,"url":"https://github.com/tohjustin/chronos","last_synced_at":"2025-05-03T09:31:54.824Z","repository":{"id":36484793,"uuid":"179221595","full_name":"tohjustin/chronos","owner":"tohjustin","description":"Browser extension for recording \u0026 visualizing web browsing activity","archived":false,"fork":false,"pushed_at":"2024-09-11T04:06:47.000Z","size":6523,"stargazers_count":16,"open_issues_count":45,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T13:44:22.266Z","etag":null,"topics":["browser-extension","chrome-extension","create-react-app","d3","data-visualization","dexie","evergreen-ui","indexeddb","react","redux","redux-toolkit","typescript","web-browsing"],"latest_commit_sha":null,"homepage":"https://try-chronos.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tohjustin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-04-03T06:07:09.000Z","updated_at":"2025-03-05T08:03:08.000Z","dependencies_parsed_at":"2024-04-15T17:31:14.989Z","dependency_job_id":"d1ded56c-9fff-4c45-bae2-658923af8fa9","html_url":"https://github.com/tohjustin/chronos","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tohjustin%2Fchronos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tohjustin%2Fchronos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tohjustin%2Fchronos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tohjustin%2Fchronos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tohjustin","download_url":"https://codeload.github.com/tohjustin/chronos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252168999,"owners_count":21705362,"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":["browser-extension","chrome-extension","create-react-app","d3","data-visualization","dexie","evergreen-ui","indexeddb","react","redux","redux-toolkit","typescript","web-browsing"],"created_at":"2024-11-12T22:30:20.877Z","updated_at":"2025-05-03T09:31:53.780Z","avatar_url":"https://github.com/tohjustin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/title.png\"\u003e\n\u003c/p\u003e\n\n## About\n\n[![CircleCI](https://circleci.com/gh/tohjustin/chronos/tree/master.svg?style=shield)](https://circleci.com/gh/tohjustin/chronos/tree/master)\n[![Release](https://aegisbadges.appspot.com/static?subject=release\u0026status=v1.1.1\u0026color=379AF7)](https://github.com/tohjustin/chronos/releases)\n[![License](https://aegisbadges.appspot.com/static?subject=license\u0026status=MIT\u0026color=379AF7)](https://opensource.org/licenses/MIT)\n\nChronos is a browser extension for recording \u0026 visualizing web browsing activity.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/home-page.png\"\u003e\n\u003c/p\u003e\n\n### FAQ\n\n#### Do you collect any data?\n\n__Not at all!__ All recorded web browsing activity is stored locally on your device. The application is not connected to any external services \u0026 no data will be transmitted out of your device.\n\n#### How can I export my data?\n\nUsers have the ability to export all recorded data or import data (backed-up from a different browser or machine) via the application's settings page.\n\n#### What browsers are supported?\n\nHere's the list of supported browsers:\n\n* Brave \u0026 Chrome ([Chrome Web Store](https://chrome.google.com/webstore/detail/chronos/ihinclpfkgmmabjjmkldhegakmdhdcio))\n* Edge Chromium ([Edge Extension Store](https://microsoftedge.microsoft.com/addons/detail/lojilcmafodjobdcannaljdllkliofpo))\n* Firefox ([Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/chronos-app))\n* Opera (under Opera Add-ons review)\n\n[//]: # (TODO: How do I request a feature?)\n\n## Getting Started\n\n### Table of Contents\n\n* [Overview](#overview)\n* [Development Workflow](#development-workflow)\n  * [Debugging the background page](#debugging-the-background-page)\n  * [Debugging the extension page](#debugging-the-extension-page)\n    * [React DevTools](#react-devtools)\n    * [Redux DevTools](#redux-devtools)\n* [Linting \u0026 Testing](#linting-\u0026-testing)\n  * [Static Checking \u0026 Linting](#static-checking-\u0026-linting)\n  * [Unit Testing](#unit-testing)\n* [Packaging](#packaging)\n  * [Extension](#extension)\n  * [Extension Demo (Web Application)](#extension-demo-web-application)\n\n### Overview\n\nThe application consists of two main components:\n\n* __Background Page__: A script (a.k.a `ActivityLogger`) that runs in the background \u0026 listens to browser tab events to record web browsing activity into the browser's client-side storage ([IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)).\n* __Extension Page__: A web application that visualizes the user's web browsing activity by using the data stored in [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) by the background page.\n\n### Development Workflow\n\nThe recommended way to develop the application is to temporarily install the extension on your browser with the following steps:\n\n1. Start the application's `webpack-dev-server`:\n\n    ```bash\n    yarn start\n    ```\n\n2. Go to the browser's extension management page:\n\n    * __Brave__: [brave://extensions](brave://extensions)\n    * __Chrome__: [chrome://extensions](chrome://extensions)\n    * __Firefox__: [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)\n    * __Opera__: [opera://extensions](opera://extensions)\n\n3. Temporarily install the extension (select `manifest.json` found in `/build`):\n\n    \u003e NOTE: Depending on the browser platform, you might be required to enable \"Developer mode\".\n\n    * __Brave__/__Chrome__/__Opera__: Click on the _\"Load Unpacked\"_ button located at the top of the page\n    * __Firefox__: Click on the _\"Load Temporary Add-on...\"_ button located at the top of the page\n\n4. Once installed successfully, you should see the `chronos`'s icon in your browser's navigation bar. Click on it to navigate to `chronos`'s extension page.\n\n5. You can start modifying the codebase \u0026 observe the changes right away without having to reinstall the extension (i.e. hot-reloading should work out of the box).\n\n#### Debugging the background page\n\n1. Go to the browser's extension management page\n\n2. To open the DevTools panel of the extension's background page:\n\n    * __Brave__/__Chrome__/__Opera__: Click on _\"index.html\"_ link located on the extension's details card\n    * __Firefox__: Click on _\"Inspect\"_ button located on the extension's details card\n\n#### Debugging the extension page\n\nTo get development tools such as [react-devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) \u0026 [redux-devtools](https://github.com/reduxjs/redux-devtools) to work against a temporarily installed extension, start the application's `webpack-dev-server` in remote debug mode:\n\n```bash\nyarn start:remote-debug\n```\n\n##### React DevTools\n\n1. Start `react-devtools` server on `http://localhost:8097` (you should observe the `react-devtools` UI being opened in a new window)\n\n    ```bash\n    yarn react-devtools\n    ```\n\n2. Reload the extension page, the application should automatically connect to the `react-devtools` server \u0026 UI.\n\n##### Redux DevTools\n\n1. Start `redux-devtools` server on `http://localhost:8098`\n\n    ```bash\n    yarn redux-devtools\n    ```\n\n2. Open the Remote `redux-devtools` UI by clicking on the `redux-devtools` extension icon in your browser window \u0026 selecting the _\"Open Remote DevTools\"_ option on the dropdown\n\n3. If this is your first time using the tool, go to the `redux-devtools` UI settings \u0026 ensure that:\n    * _\"Use custom (local) server\"_ is checked\n    * _\"Host name\"_ \u0026 _\"Port\"_ field is set to `locahost` \u0026 `8098` respectively\n    * _\"Use secure connection\"_ option is unchecked\n\n4. Reload the extension page, the application should automatically connect to the `redux-devtools` server \u0026 UI.\n\n### Linting \u0026 Testing\n\n#### Static Checking \u0026 Linting\n\nRun `tsc`, [ESLint](https://eslint.org/), [stylelint](https://stylelint.io/) \u0026 [Prettier](https://prettier.io/)\n\n```shell\nyarn run check\n```\n\nFix [ESLint](https://eslint.org/) all fixable errors \u0026 warnings\n\n```shell\nyarn lint:fix\n```\n\nFix [stylelint](https://stylelint.io/) all fixable errors \u0026 warnings\n\n```shell\nyarn stylelint:fix\n```\n\nFix [Prettier](https://prettier.io/) all fixable errors \u0026 warnings\n\n```shell\nyarn prettier:fix\n```\n\n#### Unit Testing\n\nRun all unit tests \u0026 watch for changes\n\n```shell\nyarn test\n```\n\nRun all unit tests \u0026 enable [Node Debugger](https://nodejs.org/docs/latest-v12.x/api/debugger.html)\n\n```shell\nyarn test:debug\n```\n\nRun all unit tests\n\n```shell\nyarn test:ci\n```\n\n### Packaging\n\n#### Extension\n\nBuild the extension \u0026 output bundle into `/build` \u0026 a zip file `build-\u003cGIT_COMMIT_SHA\u003e.zip` which can be used across all supported browsers.\n\n```shell\nyarn build:extension\n```\n\n#### Extension Demo (Web Application)\n\n\u003e __NOTE__: Make sure you have created `.env` before proceeding\n\u003e\n\u003e * see [.env.example](./.env.example) for list of environment variables to populate\n\nFor demo purposes, we can build the extension as a web application that has the extension's UI, populated with pre-generated web browsing activity data.\n\nBuild the extension as a demo web application \u0026 output bundle into `/build`\n\n```shell\nyarn build:demo\n```\n\n## License\n\nChronos is [MIT licensed](./LICENSE).\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftohjustin%2Fchronos.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ftohjustin%2Fchronos?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftohjustin%2Fchronos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftohjustin%2Fchronos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftohjustin%2Fchronos/lists"}