BranchesTags

Repository files navigation

better-diff

diffshub.com is a hosted viewer for public GitHub diffs, built on Pierre's open-source @pierre/diffs and @pierre/trees. 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.

Docs: nabroleonx.github.io/better-diff

Install

Distribution is via GitHub Releases. No Chrome Web Store or Firefox Add-ons listing, by design (the project is intentionally small and unmonetized).

  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.

For Firefox, load firefox-mv2/manifest.json via about:debugging#/runtime/this-firefox.

Setup

Once the extension is loaded:

  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the one I registered for the project). To use your own instead (for example, to install on an org I don't have access to), open the extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.

The Client ID is not a secret. Device Flow doesn't use a client secret, so the bundled ID is committed in the source.

Using your own GitHub App

  1. Register a GitHub App (or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read, Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.

Development

npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2

Production builds:

npm run build
npm run build:firefox
npm run zip

Release

Releases are built by GitHub Actions from tags:

git tag v0.1.0
git push origin v0.1.0

The workflow typechecks, audits production dependencies, builds Chrome and Firefox, then uploads the zip files to the GitHub release.

Permissions

PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.

The extension does not request cookies, webRequest, <all_urls>, or declarativeNetRequest.

Privacy

  • Token storage defaults to chrome.storage.session (in-memory only, wiped on browser close). better-diff never stores tokens in chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to connect-src https://api.github.com https://github.com. Even compromised code has nowhere to exfiltrate a token.

Dependency updates

Handled by Renovate. Major updates require dashboard approval. Updates are grouped where that keeps review simpler, and automerge is disabled.

Credits

This extension exists because @pierre/diffs and @pierre/trees are open source. 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 that. 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.

License

MIT. @pierre/diffs and @pierre/trees themselves are Apache-2.0.

About

diffshub.com for private GitHub repos

nabroleonx.github.io/better-diff

Resources

Readme
MIT license
Activity

Stars

8 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
better-diff
diffshub.com is a hosted viewer for public GitHub diffs,
built on Pierre's open-source @pierre/diffs and
@pierre/trees. 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.
Docs: nabroleonx.github.io/better-diff
Install
Distribution is via GitHub Releases. No Chrome Web Store or Firefox
Add-ons listing, by design (the project is intentionally small and
unmonetized).
  1. Grab the latest zip from the Releases page.
  2. Open chrome://extensions (or edge://extensions).
  3. Enable Developer mode.
  4. Click Load unpacked.
  5. Select the unzipped chrome-mv3 folder.
For Firefox, load firefox-mv2/manifest.json via
about:debugging#/runtime/this-firefox.
Setup
Once the extension is loaded:
  1. Click the extension icon → Connect GitHub.
  2. By default the extension uses a bundled GitHub App Client ID (the
one I registered for the project). To use your own instead (for
example, to install on an org I don't have access to), open the
extension's options page and paste your Client ID before connecting.
  3. GitHub shows a one-time code, you approve it. Done.
The Client ID is not a secret. Device Flow doesn't use a client
secret, so the bundled ID is committed in the source.
Using your own GitHub App
  1. Register a GitHub App
(or an OAuth App) with Device Flow enabled.
  2. Set repository permissions: Contents read, Pull requests read,
Metadata read. Disable webhooks.
  3. Install the app on your account or org.
  4. Paste the public Client ID into the extension's options page, or
build with WXT_GITHUB_CLIENT_ID=<your_id> npm run build.
Development
npm ci
npm run setup # wxt prepare
npm run dev # Chrome MV3
npm run dev:firefox # Firefox MV2
Production builds:
npm run build
npm run build:firefox
npm run zip
Release
Releases are built by GitHub Actions from tags:
git tag v0.1.0
git push origin v0.1.0
The workflow typechecks, audits production dependencies, builds Chrome
and Firefox, then uploads the zip files to the GitHub release.
Permissions
PermissionWhy
storageStore the OAuth token when connected, plus UI prefs locally. Never sync.
alarmsPolls the GitHub Device Flow endpoint to complete authentication after the service worker idles out.
sidePanelOptional side-panel viewer mode.
host_permissions: https://api.github.com/*Fetch authenticated diff data.
host_permissions: https://github.com/*Inject the "Open better-diff" button on PR / commit / compare pages; also where the Device Flow endpoints live.
The extension does not request cookies, webRequest, <all_urls>,
or declarativeNetRequest.
Privacy
  • Token storage defaults to chrome.storage.session (in-memory only,
wiped on browser close). better-diff never stores tokens in
chrome.storage.sync.
  • No telemetry.
  • The viewer's CSP locks network access to
connect-src https://api.github.com https://github.com. Even
compromised code has nowhere to exfiltrate a token.
Dependency updates
Handled by Renovate. Major updates require dashboard approval. Updates
are grouped where that keeps review simpler, and automerge is disabled.
Credits
This extension exists because @pierre/diffs and
@pierre/trees are open source. 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 that. 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.
License
MIT. @pierre/diffs and @pierre/trees themselves are
Apache-2.0.
About
diffshub.com for private GitHub repos
nabroleonx.github.io/better-diff
Resources
Readme
MIT license
Activity
Stars
8 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages