mirror of
https://codeberg.org/Tilo-K/diff-highlighter.git
synced 2026-07-03 08:13:02 +00:00
88 lines
2.9 KiB
Markdown
88 lines
2.9 KiB
Markdown
# 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.
|
|
|
|
```sh
|
|
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.
|