I built a browser extension to show pixel diffs in GitHub PRs
I've been using AI to write more code, which has also meant writing more tests—including screenshot tests to catch unexpected UI changes. That leaves me reviewing two things: the code in GitHub and the visual diff in a Playwright report. I kept switching between them to answer a small question: did that button move, or did its padding change by a couple of pixels? GitHub's side-by-side, swipe,…
A software developer has created a browser extension named gh-pixel-diff to provide pixel-level differences in GitHub pull requests (PRs). Prior to this, the developer relied on AI to generate code and tests, including screenshot tests to detect unexpected UI changes. To review these changes, developers typically compared the code on GitHub and the visual diff in a Playwright report, often switching between the two to answer simple questions about UI alterations.
The gh-pixel-diff extension enhances GitHub's existing image-view controls by adding pixel diff functionality directly within PRs. Users can test the extension without installation by dropping two images onto a dedicated comparison page. The extension operates locally in the browser, processing files without sending them anywhere else.
When reviewing PRs, the view initially focuses on the changed region and presents the number and percentage of changed pixels. This feature allows reviewers to step through individual regions rather than scanning the entire page. Additional options include zooming in and panning to inspect minute shifts, switching between various views such as before, after, diff, a three-column layout, and an overlay that highlights changes on the updated screenshot. Users can also adjust the comparison threshold and customize highlight colors.
The extension enables users to save the current view as a PNG file to attach to a review comment. It supports self-hosted GitLab and GitHub Enterprise instances, with the ability to add these instances in the settings. A beta feature, introduced to address the challenge of entire page shifts, attempts to match horizontal pixel rows before comparison.
By using unique matching rows as anchors, similar to text diffs, the extension aims to differentiate vertical shifts from other changes. This adjustment also affects how differently sized images are handled, marking edges that exist in only one image without contributing to the change count or causing automatic cropping.
Repetitive content and blank areas may lead to incorrect matches, and the reported differences are considered a heuristic rather than a precise analysis of the page's layout. Consequently, the reported difference is turned off by default. The developer seeks examples from users experiencing alignment issues with the beta feature to improve future iterations.
Technically, GitHub renders image diffs within an iframe at viewscreen.githubusercontent.com. The extension adds its controls to this iframe and reads the image URLs from the frame's enc_url1 and enc_url2 parameters, preserving the signed URLs GitHub provides for private repository images. Pixel matching is carried out using the pixelmatch library, with the processing occurring in a Web Worker when available, otherwise falling back to the main thread.
GitLab requires a separate integration since its viewer is integrated directly into the merge request page. The extension requests access to GitHub's image-viewer domain and gitlab.com, with requests sent separately when self-hosted GitLab instances are added. The comparison code is shared across both platforms. No server-side image processing or analytics are employed, ensuring all operations occur within the browser.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
