kl13nt / loggy

Gain insights on the time you spend online!

Loggy!

Gain insights on the time you spend online! Loggy logs the time you spend on each website to beautifully give you insights on your internet habits when needed.

Architecture

The plugin is built using JavaScript, Vue, and sprinkles of Tailwind. This setup is backed by Webpack to bundle the JavaScript and Vue templates into redistributable output files that are ready to bundle into the extension xpi. Tailwind is compiled using PostCSS in the Webpack pipeline.

Permissions Breakdown

Loggy requires very few permissions to work. These permissions relate to storing your history and monitoring the tabs you open/close.

• Store unlimited amount of client-side data (storage, unlimitedStorage) is used for storing website data. Its size is based on the number of websites you visit and how long you spend on each so I had to use unlimitedStorage for it.
• Access browser tabs (tabs) is used to get metadata about visited websites. This permission cannot, in any way, grant access to your private data such as cookies.

Getting Started

Install the addon from the Mozilla Addons Store and it'll start logging right away!

Browser Action

Upon installation the extension will show up in your browser's toolbar. Clicking it will show a popup with the top 5 websites you visited today alongside an approximation of the total time you spent browsing.

Full Log

Clicking the Visit full history link in the browser action will take you to the full log that contains all websites since you installed the extension. You'll be able to search and sort the log.

✋ Wish to Contribute?

I'm open to all kinds of contributions. If you want to:

🤔 Suggest a feature
🐛 Report an issue
📖 Improve documentation
👩‍💻 Contribute to the code

You are more than welcome. Before contributing, kindly check the guidelines. This repo follows a code of conduct.

License

This projects is licensed under the GNU GPLv3 License.

loggy's Issues

Daily report filtering is messed up

Describe the bug
Instead of displaying the day's top 5 websites, it displays other websites. This is probably a problem with my Array.filter or reduce usage.

Check https://github.com/KL13NT/loggy/blob/master/src/browser-action/App.vue.

Some websites don't record properly

Describe the bug
I don't really know. Needs further testing.

To Reproduce
Remain on the same website for a prolonged period of time.

Expected behavior
Should log all of it. Instead, it sometimes logs 3 hours out of a total 5.

Refactor the data schema

The current schema is difficult to maintain and use, and forces me to build mumbo jumbo code that is confusing and poor in performance. It's also difficult to get started with since it's difficult to document for onboarding.

The current schema is:

class Entry {
  origin: string;
  lastVisit: Date;
  firstVisit: Date;
  [year]: {
    [month]: {
      [day]: number
    }
  }
}

This schema is not properly built, doesn't adhere to any SOLID principles, difficult to maintain, and is difficult to maintain. The new schema is:

class Session {
  date: Date;
  duration: number;
}

class Entry {
  origin: string;
  lastVisit: Date;
  firstVisit: Date;
  sessions: Array<Session>;
}

This will require an overhaul of the codebase to use the new schema.

Date Range Filtering

Having to view the full history log instead of a specific time range is not very useful. Add date selectors to select a specific range, and set the default to a month.

Settings Page

A settings page should be navigate-able by going to Addons > Loggy > Options. It should include the following for starters:

• An ignore list where users can ignore websites
• An option to ignore browser pages such as about:-prefixed pages

Smart Idle Detection

I rely on the browser's window.focused to determine whether the user is idle or not. But this has one major flaw; if a user has the browser focused and goes idle it'll keep counting. This is an inaccuracy that could be mitigated using a content script that registers a global event listener for any user action, and based on a specific timeout, communicate the user's idle state to the background process.

Addon tracking postinstall

When the addon is first installed, a tab change needs to occur for it to detect changes and start tracking. Add a way for it to start tracking the focused tab immediately postinstall.

Add Delete Origin

Cant' Delete Origin From History

Explicit Chromium* Support

Chromim-based browser don't support the browser namespace. To be able to safely distribute this extension for Chrome, Edge, and others, I'd need to properly configure a setup for them.

References:
mozilla/web-ext#809
https://hacks.mozilla.org/2019/10/developing-cross-browser-extensions-with-web-ext-3-2-0/
https://github.com/mozilla/webextension-polyfill/#usage-with-webpack-without-bundling
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension

Is there a version for chrome ?

Is the extension available or will be available for chrome?

Stop using StorageArea.set directly with complex types

As documented on the MDN page:

It's generally not possible to store other types, such as Function, Date, RegExp, Set, Map, ArrayBuffer, and so on. Some of these unsupported types will restore as an empty object, and some cause set() to throw an error. The exact behavior here is browser-specific.

The behavior on Firefox, luckily enough, stores Date as strings, but we need to serialize before updating data.

Browser Action

Currently the way users can view the log is by going to Menu > Addons > Loggy > Options. This is cumbersome. Adding a browser action to make it easier should be a priority. A simple button that opens up the log would be fine.

To do:

• Add a browser action
• Add a browser action page with simple statistics
• Show only today's statistics of top 5 websites
• Add a link to open the full log from the browser action
• Add a link to the settings page, this will initially be disabled