About

Chronos is a browser extension for recording & visualizing web browsing activity.

FAQ

Do you collect any data?

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.

How can I export my data?

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.

What browsers are supported?

Here's the list of supported browsers:

• Brave & Chrome (Chrome Web Store)
• Edge Chromium (Edge Extension Store)
• Firefox (Firefox Add-ons)
• Opera (under Opera Add-ons review)

Getting Started

Table of Contents

• Overview
• Development Workflow
  • Debugging the background page
  • Debugging the extension page
    • React DevTools
    • Redux DevTools
• Linting & Testing
  • Static Checking & Linting
  • Unit Testing
• Packaging
  • Extension
  • Extension Demo (Web Application)

Overview

The application consists of two main components:

• Background Page: A script (a.k.a ActivityLogger) that runs in the background & listens to browser tab events to record web browsing activity into the browser's client-side storage (IndexedDB).
• Extension Page: A web application that visualizes the user's web browsing activity by using the data stored in IndexedDB by the background page.

Development Workflow

The recommended way to develop the application is to temporarily install the extension on your browser with the following steps:

1. Start the application's webpack-dev-server:

   yarn start

2. Go to the browser's extension management page:

   • Brave: brave://extensions
   • Chrome: chrome://extensions
   • Firefox: about:debugging#/runtime/this-firefox
   • Opera: opera://extensions

3. Temporarily install the extension (select manifest.json found in /build):

   NOTE: Depending on the browser platform, you might be required to enable "Developer mode".

   • 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

4. 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.

5. 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).

Debugging the background page

1. Go to the browser's extension management page

2. To 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

Debugging the extension page

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

React DevTools

1. Start react-devtools server on http://localhost:8097 (you should observe the react-devtools UI being opened in a new window)

   yarn react-devtools

2. Reload the extension page, the application should automatically connect to the react-devtools server & UI.

Redux DevTools

1. Start redux-devtools server on http://localhost:8098

   yarn redux-devtools

2. Open the Remote redux-devtools UI by clicking on the redux-devtools extension icon in your browser window & selecting the "Open Remote DevTools" option on the dropdown

3. If this is your first time using the tool, go to the redux-devtools UI settings & ensure that:

   • "Use custom (local) server" is checked
   • "Host name" & "Port" field is set to locahost & 8098 respectively
   • "Use secure connection" option is unchecked

4. Reload the extension page, the application should automatically connect to the redux-devtools server & UI.

Linting & Testing

Static Checking & Linting

Run tsc, ESLint, stylelint & Prettier

yarn run check

Fix ESLint all fixable errors & warnings

yarn lint:fix

Fix stylelint all fixable errors & warnings

yarn stylelint:fix

Fix Prettier all fixable errors & warnings

yarn prettier:fix

Unit Testing

Run all unit tests & watch for changes

yarn test

Run all unit tests & enable Node Debugger

yarn test:debug

Run all unit tests

yarn test:ci

Packaging

Extension

Build the extension & output bundle into /build & a zip file build-<GIT_COMMIT_SHA>.zip which can be used across all supported browsers.

yarn build:extension

Extension Demo (Web Application)

NOTE: Make sure you have created .env before 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:demo

License

Chronos is MIT licensed.