/RoamShowTime

⏱ Browser extension for RoamResearch.com, to show block creation & last edit times

Primary LanguageJavaScriptMIT LicenseMIT

Roam ShowTime

logo

Browser extension to show block creation & edit times on RoamResearch.com.

What it looks like:

This is useful when reviewing how much time you spent on a topic/thought/task.

Instructions for use

  • Toggle the time display using C-c C-x.
  • The first entry is the creation time, the second the time of last edit.
  • If those are the same (ignoring seconds), only one is displayed
  • For times more than 24 hours in the past, the full date is displayed.

Note that the displayed times concern the block text only (and not any descendant blocks).

⏱ When a lot of blocks are loaded on the page, the app will start to respond slowly. Toggling off the time display while you are interacting with blocks will then help.

🎨 If you use custom CSS on Roam that drastically changes the layout, this plugin might well clash with it. Smaller theming changes should be fine.

Installation

chrome webstore badge

  • Installation from the Chrome webstore auto-updates. (Note however that there's a review delay whenever a new version is uploaded to the webstore).
  • For Firefox, download the XPI file in the dist directory (or on the Releases tab on GitHub). Then install as follows. This installation will not auto update. (There is no auto-updating entry for this plugin on Addons.Mozilla.Org (yet): "Mozilla policy doesn't allow listings for add-ons for Roam Research because the site is limited access").
  • When you want to install directly from source, here are the instructios for Chrome and for Firefox.

How it works

It's based on the feature described in this tweet:

If you hit C-c C-x you'll get an edit icon for every block, with data-create-time and data-edit-time [attributes] – @Conaw (May 26, 2020)

This extension

  • listens for DOM mutations (e.g. collapsing or editing any block);
  • throttles these events (so that the extension code does not run too often);
  • on each (throttled) DOM mutation, checks whether the document contains any divs with a data-edit-time attribute..
  • ..and if so, adds absolutely positioned divs to the left of each bullet, with formatted time strings taken from the data-..-time attributes.
  • When the sidebar is open, some left-padding is added to both the main container and the sidebar, so that the timestamps fit on screen.