diff-highlighter/README.md

Diff Highlighter

Diff Highlighter is a Chrome extension that makes raw .diff and .patch files easier to read in the browser.

It colors additions, deletions, file headers, and hunks, then adds language-aware syntax highlighting on top when possible.

Features

• Highlights raw .diff and .patch pages automatically.
• Colors added lines green and removed lines red.
• Styles file headers and hunk headers for easier scanning.
• Adds syntax highlighting for changed code.
• Works with light and dark browser themes.
• Can be toggled from the extension popup.
• Supports the Alt+D keyboard shortcut for quickly turning highlighting on or off.
• Requests only the storage permission.

Where It Works

Diff Highlighter works on plain-text diff and patch pages, including:

• Raw .diff and .patch URLs from GitHub and Bitbucket.
• Direct links to .diff or .patch files.
• Local file:// diffs, if file access is enabled for the extension.

It does not change full HTML code review pages, such as GitHub's "Files changed" tab. Those pages already render their own HTML diff view and are outside the scope of this extension.

Installation

From A Release

1. Download the release zip file.
2. Unzip it somewhere permanent on your computer.
3. Open chrome://extensions.
4. Enable Developer mode.
5. Click Load unpacked.
6. Select the unzipped extension folder.

From Source

Requires Node 20 or newer.

npm ci
npm run build

Then load the generated dist/ folder as an unpacked extension in chrome://extensions.

Using The Extension

Open any raw .diff or .patch URL. The extension runs automatically when the page is plain text and the URL matches a diff or patch file.

Use the extension popup to control:

• Highlighting: turns the diff colors on or off.
• Syntax highlighting: turns language-aware code highlighting on or off.

Use Alt+D to quickly toggle the main highlighting setting. You can change the shortcut at chrome://extensions/shortcuts.

Local Files

Chrome blocks extensions from reading local files unless you allow it.

To use Diff Highlighter with local .diff or .patch files:

1. Open chrome://extensions.
2. Find Diff Highlighter.
3. Open Details.
4. Enable Allow access to file URLs.

Privacy

Diff Highlighter runs locally in your browser. It does not send page content, settings, or browsing data to any server.

The extension uses Chrome storage only to remember your highlighting preferences.

Troubleshooting

If a diff is not highlighted:

• Make sure the URL ends in .diff or .patch.
• Make sure the page is shown as plain text, not as a full website or code review page.
• If opening a local file, make sure Allow access to file URLs is enabled.
• Check that highlighting is enabled in the extension popup.

For very large diffs, syntax highlighting may be skipped to keep the page responsive. Diff colors still apply.