Building a Chrome Extension for Jira: Colored History Diffs and Layout Toggles

Side-by-side Jira history diff: removed words in red with strikethrough, added words in green
How the extension renders a Description change in the History tab — removed words in red, added words in green.

Jira’s issue History tab tells you what changed, but
reading it is a chore: old and new values sit in two plain columns and you have to
spot the difference yourself. For a one-word status change that’s fine. For an
edited Description with a dozen tweaked sentences, it’s painful. So I built
a small Chrome extension to fix it.

What it does

  • Word-level colored diff in the History tab. Text fields
    (Description, Summary, Environment, comments, and any long value) are rendered
    side by side with removed words struck through in red and added words highlighted
    in green — so a changed sentence reads at a glance.
  • Floating layout toggles to hide or show the issue sidebar and
    the details module, giving you a wider, distraction-free view of the ticket.
  • Persistent settings. Your toggle choices are stored and
    re-applied on every issue page, even as Jira re-renders panels via AJAX.

How it works

It’s a Manifest V3 extension built around a single content script. The History
tab loads its rows asynchronously when you click it, so a MutationObserver
watches the DOM and enhances the change rows as soon as they appear. The diff itself
is a classic longest-common-subsequence pass over word tokens, with a size guard that
falls back to a coarser line-level diff for very large fields so the page never
freezes.

The layout toggles are just as simple: two floating buttons flip the display of
the relevant Jira elements and save the state through the extension’s storage, so the
view you prefer survives a reload.

Lessons learned

The trickiest part wasn’t the diff algorithm — it was Jira’s asynchronous
rendering. Anything you inject can be wiped out the moment Jira refreshes a panel, so
every enhancement has to be idempotent and re-applied on DOM changes. Tagging
processed rows and re-running on mutations keeps it robust without reprocessing the
whole page on every tick.

The extension is bundled as a versioned zip for easy installation and released on
GitHub. It’s a small tool, but it turns the History tab from something you squint at
into something you actually read.

Nach oben scrollen