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:
|
jobs:
|
||||||
build:
|
build:
|
||||||
# On Codeberg's hosted runner use a label such as `codeberg-tiny`.
|
# On Codeberg's hosted runner use a label such as `codeberg-tiny`.
|
||||||
runs-on: codeberg-medium
|
runs-on: self-hosted-x64
|
||||||
|
|
||||||
container:
|
container:
|
||||||
image: node:22-bookworm
|
image: node:22-bookworm
|
||||||
steps:
|
steps:
|
||||||
|
|||||||
@@ -10,7 +10,8 @@ permissions:
|
|||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
release:
|
release:
|
||||||
runs-on: codeberg-medium
|
runs-on: self-hosted-x64
|
||||||
|
|
||||||
container:
|
container:
|
||||||
image: node:22-bookworm
|
image: node:22-bookworm
|
||||||
steps:
|
steps:
|
||||||
|
|||||||
126
README.md
126
README.md
@@ -1,85 +1,87 @@
|
|||||||
# Diff Highlighter
|
# Diff Highlighter
|
||||||
|
|
||||||
A Chrome (Manifest V3) extension that highlights `.diff` and `.patch` files in the
|
Diff Highlighter is a Chrome extension that makes raw `.diff` and `.patch` files easier to read in the browser.
|
||||||
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.
|
|
||||||
|
|
||||||
## 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`
|
## Features
|
||||||
(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.
|
|
||||||
|
|
||||||
## 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 |
|
## Where It Works
|
||||||
| --- | --- |
|
|
||||||
| **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`). |
|
|
||||||
|
|
||||||
## 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
|
```sh
|
||||||
npm ci
|
npm ci
|
||||||
npm run build # type-checks, then bundles to dist/
|
npm run build
|
||||||
npm run watch # rebuild on change (dev)
|
|
||||||
```
|
```
|
||||||
|
|
||||||
`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**.
|
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.
|
||||||
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`.
|
|
||||||
|
|
||||||
## Continuous integration (Codeberg / Forgejo Actions)
|
Use the extension popup to control:
|
||||||
|
|
||||||
CI lives in [`.forgejo/workflows/ci.yml`](.forgejo/workflows/ci.yml) and runs
|
- **Highlighting**: turns the diff colors on or off.
|
||||||
`npm ci → typecheck → build` in a `node:22-bookworm` container — the same steps as a
|
- **Syntax highlighting**: turns language-aware code highlighting on or off.
|
||||||
local build, so a green local build means green CI.
|
|
||||||
|
|
||||||
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:
|
## Local Files
|
||||||
```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`).
|
|
||||||
|
|
||||||
## 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.
|
To use Diff Highlighter with local `.diff` or `.patch` files:
|
||||||
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.
|
|
||||||
|
|
||||||
## Layout
|
1. Open `chrome://extensions`.
|
||||||
|
2. Find Diff Highlighter.
|
||||||
|
3. Open **Details**.
|
||||||
|
4. Enable **Allow access to file URLs**.
|
||||||
|
|
||||||
```
|
## Privacy
|
||||||
src/
|
|
||||||
manifest.json MV3 manifest
|
Diff Highlighter runs locally in your browser. It does not send page content, settings, or browsing data to any server.
|
||||||
content.ts detect + render + live toggle
|
|
||||||
diff-parser.ts pure diff parsing / language detection
|
The extension uses Chrome storage only to remember your highlighting preferences.
|
||||||
background.ts defaults + Alt+D command
|
|
||||||
popup/ popup UI
|
## Troubleshooting
|
||||||
styles/ diff.css, hljs-theme.css, popup.css (all light/dark)
|
|
||||||
scripts/ build.mjs (esbuild), make-icons.mjs
|
If a diff is not highlighted:
|
||||||
.forgejo/workflows/ CI
|
|
||||||
```
|
- 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