mirror of
https://codeberg.org/Tilo-K/diff-highlighter.git
synced 2026-07-03 16:23:02 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
1bd9a3954e
|
|||
|
0d4cae69b9
|
@@ -4,7 +4,8 @@ on: [push, pull_request]
|
||||
jobs:
|
||||
build:
|
||||
# On Codeberg's hosted runner use a label such as `codeberg-tiny`.
|
||||
runs-on: codeberg-medium
|
||||
runs-on: self-hosted-x64
|
||||
|
||||
container:
|
||||
image: node:22-bookworm
|
||||
steps:
|
||||
|
||||
@@ -10,7 +10,8 @@ permissions:
|
||||
|
||||
jobs:
|
||||
release:
|
||||
runs-on: codeberg-medium
|
||||
runs-on: self-hosted-x64
|
||||
|
||||
container:
|
||||
image: node:22-bookworm
|
||||
steps:
|
||||
|
||||
126
README.md
126
README.md
@@ -1,85 +1,87 @@
|
||||
# Diff Highlighter
|
||||
|
||||
A Chrome (Manifest V3) extension that highlights `.diff` and `.patch` files in the
|
||||
browser: **additions green, deletions red**, with hunk/file headers styled and the
|
||||
underlying code **syntax-highlighted** by language. Works on GitHub/Bitbucket PR
|
||||
`.diff`/`.patch` URLs, raw files, and local `file://` diffs. Light/dark aware, fast,
|
||||
and fully toggleable.
|
||||
Diff Highlighter is a Chrome extension that makes raw `.diff` and `.patch` files easier to read in the browser.
|
||||
|
||||
## How it works
|
||||
It colors additions, deletions, file headers, and hunks, then adds language-aware syntax highlighting on top when possible.
|
||||
|
||||
- A content script runs only on `text/plain` pages whose URL ends in `.diff`/`.patch`
|
||||
(the `include_globs` matcher covers query strings too, e.g. `…/123.diff?token=…`).
|
||||
- It reads the browser-rendered `<pre>`, parses the unified-diff structure, and:
|
||||
1. **Instantly** repaints every line with its diff color (green/red/context/headers).
|
||||
2. **Progressively** layers syntax highlighting via [highlight.js](https://highlightjs.org/),
|
||||
processed in idle-time chunks so large diffs stay responsive. Above ~50k highlightable
|
||||
lines, syntax is skipped to preserve speed (diff colors remain).
|
||||
- Toggling is instant and reload-free: the popup writes `chrome.storage.sync`, and the
|
||||
content script re-renders on change. `Alt+D` flips the master toggle from anywhere.
|
||||
- Only the `storage` permission is requested — declarative content scripts need no host
|
||||
permissions.
|
||||
## Features
|
||||
|
||||
## Toggles
|
||||
- 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.
|
||||
|
||||
| Control | Effect |
|
||||
| --- | --- |
|
||||
| **Highlighting** (popup) | Master switch for the green/red diff layer. |
|
||||
| **Syntax highlighting** (popup) | Layer language-aware token colors on top. |
|
||||
| `Alt+D` | Flip the master switch (rebind at `chrome://extensions/shortcuts`). |
|
||||
## Where It Works
|
||||
|
||||
## Build
|
||||
Diff Highlighter works on plain-text diff and patch pages, including:
|
||||
|
||||
Requires Node 20+.
|
||||
- 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 # type-checks, then bundles to dist/
|
||||
npm run watch # rebuild on change (dev)
|
||||
npm run build
|
||||
```
|
||||
|
||||
`dist/` is the unpacked extension (git-ignored).
|
||||
Then load the generated `dist/` folder as an unpacked extension in `chrome://extensions`.
|
||||
|
||||
## Load in Chrome
|
||||
## Using The Extension
|
||||
|
||||
1. `chrome://extensions` → enable **Developer mode**.
|
||||
2. **Load unpacked** → select the `dist/` folder.
|
||||
3. For local diffs, open the extension's **Details** page and enable
|
||||
**“Allow access to file URLs.”** Then try `samples/example.diff`.
|
||||
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.
|
||||
|
||||
## Continuous integration (Codeberg / Forgejo Actions)
|
||||
Use the extension popup to control:
|
||||
|
||||
CI lives in [`.forgejo/workflows/ci.yml`](.forgejo/workflows/ci.yml) and runs
|
||||
`npm ci → typecheck → build` in a `node:22-bookworm` container — the same steps as a
|
||||
local build, so a green local build means green CI.
|
||||
- **Highlighting**: turns the diff colors on or off.
|
||||
- **Syntax highlighting**: turns language-aware code highlighting on or off.
|
||||
|
||||
To wire it up on Codeberg:
|
||||
Use `Alt+D` to quickly toggle the main highlighting setting. You can change the shortcut at `chrome://extensions/shortcuts`.
|
||||
|
||||
1. Push this repo to Codeberg:
|
||||
```sh
|
||||
git remote add origin https://codeberg.org/<you>/diff-highlighter.git
|
||||
git push -u origin main
|
||||
```
|
||||
2. Connect a runner: repo **Settings → Actions → Runners** (or use Codeberg's hosted
|
||||
runners). If using a hosted runner, change `runs-on: docker` to its label
|
||||
(e.g. `codeberg-tiny`).
|
||||
## Local Files
|
||||
|
||||
## Scope
|
||||
Chrome blocks extensions from reading local files unless you allow it.
|
||||
|
||||
Triggers on URLs/files whose path ends in `.diff`/`.patch` and that render as plain text.
|
||||
In-app **HTML** diff views (GitHub's "Files changed", Bitbucket's `/diff` endpoint) are out
|
||||
of scope — those are full HTML pages, not raw text.
|
||||
To use Diff Highlighter with local `.diff` or `.patch` files:
|
||||
|
||||
## Layout
|
||||
1. Open `chrome://extensions`.
|
||||
2. Find Diff Highlighter.
|
||||
3. Open **Details**.
|
||||
4. Enable **Allow access to file URLs**.
|
||||
|
||||
```
|
||||
src/
|
||||
manifest.json MV3 manifest
|
||||
content.ts detect + render + live toggle
|
||||
diff-parser.ts pure diff parsing / language detection
|
||||
background.ts defaults + Alt+D command
|
||||
popup/ popup UI
|
||||
styles/ diff.css, hljs-theme.css, popup.css (all light/dark)
|
||||
scripts/ build.mjs (esbuild), make-icons.mjs
|
||||
.forgejo/workflows/ CI
|
||||
```
|
||||
## 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.
|
||||
|
||||
Reference in New Issue
Block a user