better-diff v0.1.0
Source

better-diff

diffshub.com's diff viewer, packaged as a browser extension so it can read private GitHub repos.

diffshub.com, but for private repos.

diffshub.com is a hosted viewer for public GitHub diffs, built on @pierre/diffs and @pierre/trees (open-source libraries from The Pierre Computer Company). It can't reach private repos because it has no way to ask for your GitHub auth.

better-diff packages those same Pierre libraries as a browser extension and adds GitHub Device Flow authentication. You sign in with your own account, the token lives in chrome.storage on your machine, and the viewer reads private repos the same way GitHub does, through the authenticated REST API. Nothing leaves your browser.

The diff viewer itself is entirely Pierre's work. The browser-extension shell, the GitHub API client, and the auth plumbing are the only original parts here.

One click from any GitHub diff.

01

Open any GitHub diff

A pull request, a commit, or a compare URL.

02

Open it in better-diff

Two ways, whichever you prefer:

1. The extension injects an Open better-diff button into the page header on every diff page. Click it.

2. Click the better-diff icon in your browser toolbar. If the current tab is a GitHub diff, it opens that diff in the viewer.

03

Review

Sidebar tree, split or unified layout, per-file viewed checkboxes, deep links, file-tree search. All of it is Pierre's viewer, just pointed at a private repo.

Get the extension.

Distribution is via GitHub Releases. No Chrome Web Store or Firefox Add-ons listing, by design (the project is intentionally small and unmonetized). Two paths: download a pre-built zip, or build from source.

Release zip

Live

Latest build on the Releases page. Includes both Chrome MV3 and Firefox MV2 in one archive. Ships with a bundled GitHub App Client ID, so you can skip the app-registration step.

From source

Live

Clone the repo and build with your own GitHub App Client ID. Useful if you're forking or want to install on a different org. Steps in 04.

Load, then connect.

If you downloaded the release zip, you only need steps 03 and 04. If you're building from source, do all four. Either way, the GitHub App Client ID involved is not a secret (you can commit it); Device Flow doesn't use a client secret.

01

Register your own GitHub App source builds only

Open github.com/settings/apps/new. Set permissions: Contents read, Pull requests read, Metadata read. Enable Device Flow. Disable webhooks. Install the app on your account (and any orgs whose repos you want to read).

02

Build with your Client ID source builds only

shell
git clone https://github.com/nabroleonx/better-diff cd better-diff npm ci WXT_GITHUB_CLIENT_ID=Iv1.your_id_here npm run build WXT_GITHUB_CLIENT_ID=Iv1.your_id_here npm run build:firefox
03

Load unpacked

Chrome: open chrome://extensions, enable Developer mode, click Load unpacked, pick chrome-mv3/ (from the release zip) or dist/chrome-mv3/ (from source).

Firefox: open about:debugging#/runtime/this-firefox, click Load Temporary Add-on, pick the corresponding manifest.json.

04

Connect to GitHub

Click the extension icon → Connect GitHub. By default the extension uses a bundled GitHub App Client ID (the one I registered for the project). If you'd rather use your own (for example, to install on an org I don't have access to), open the extension's options, paste your Client ID, and connect from there.

Either way: GitHub shows a one-time code, you approve it, and the viewer is wired to your account.

This whole thing is Pierre's work.

The diff renderer, the file tree, the theming, the icons, the truncation primitive: all open-source libraries by The Pierre Computer Company, who also run the hosted diffshub.com that better-diff is modeled on. better-diff doesn't reimplement any of it. It's a thin browser-extension wrapper that adds GitHub Device Flow authentication and a GitHub API client so the same viewer works on private repos. The project is independent and not affiliated with or endorsed by Pierre.