Chronos is a browser extension for visualizing web browsing activity.
Not at all! All recorded web browsing activity is stored locally on your device. The application is not connected to any external services & no data will be transmitted out of your device.
Users 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.
Here's the list of supported browsers:
- Brave & Chrome (Chrome Web Store)
- Firefox (Firefox Add-ons)
- Opera (Opera Add-ons)
- Edge Chromium (coming soon)
The application consists of two main components:
- Background Page: Script (a.k.a
ActivityLogger) that runs in the background & listens to browser events to record web browsing activity into the browser's client-side storage (IndexedDB). - Extension Page: React application that retrieves & visualizes web browsing activity data stored in IndexedDB
The recommended way to develop the application is to temporarily install the extension into your browser with the following steps:
-
Start the application's
webpack-dev-server:yarn start
-
Go to the browser's extension management page:
- Brave: brave://extensions
- Chrome: chrome://extensions
- Firefox: about:debugging#/runtime/this-firefox
- Opera: opera://extensions
-
Temporarily install the extension (select
manifest.jsonfound in/build):- Brave/Chrome/Opera: Click on the "Load Unpacked" button located at the top of the page
- Firefox: Click on the "Load Temporary Add-on..." button located at the top of the page
NOTE: Depending on the browser platform, you might be required to enable "Developer mode".
-
Once installed successfully, you should see the
chronos's icon in your browser's navbar. Click on it to navigate tochronos's extension page. -
You can start modifying the codebase & observe the changes right away without having to reinstall the extension. (i.e. hot-reloading should work out of the box)
-
Go to the browser's extension management page
-
Open the DevTools panel of the extension's background page:
- Brave/Chrome/Opera: Click on "index.html" link located on the extension's details card
- Firefox: Click on "Inspect" button located on the extension's details card
To get development tools such as react-devtools & redux-devtools to work against a temporarily installed extension, start the application's webpack-dev-server in remote debug mode:
yarn start:remote-debug-
Start
react-devtoolsserver onhttp://localhost:8097(you should observe thereact-devtoolsUI being opened in a new window)yarn react-devtools
-
Reload the extension page, the application should automatically connect to the
react-devtoolsserver & UI.
-
Start
redux-devtoolsserver onhttp://localhost:8098yarn redux-devtools
-
Open the Remote
redux-devtoolsUI by clicking on theredux-devtoolsextension icon in your browser window & selecting the "Open Remote DevTools" option on the dropdown -
If this is your first time using the tool, go to the
redux-devtoolsUI settings & ensure that:- "Use custom (local) server" is checked
- "Host name" & "Port" field is set to
locahost&8098respectively - "Use secure connection" option is unchecked
-
Reload the extension page, the application should automatically connect to the
redux-devtools server & UI.
Run tsc, ESLint, stylelint & Prettier
yarn run checkFix ESLint all fixable errors & warnings
yarn lint:fixFix stylelint all fixable errors & warnings
yarn stylelint:fixFix Prettier all fixable errors & warnings
yarn prettier:fixRun all unit tests & watch for changes
yarn testRun all unit tests & enable Node Debugger
yarn test:debugRun all unit tests
yarn test:ciBuild the extension & output bundle into /build
yarn build:extensionNOTE: Make sure you have created
.envbefore proceeding
- see .env.example for list of environment variables to populate
For 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.
Build the extension as a demo web application & output bundle into /build
yarn build:demoChronos is MIT licensed.
