{
  "id": 9185582,
  "title": "I built a browser extension to show pixel diffs in GitHub PRs",
  "url": "https://urgent.news/2026/09/22/i-built-a-browser-extension-to-show-pixel-diffs-in-github-prs",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-22T19:39:10.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/radilov/i-built-a-browser-extension-to-show-pixel-diffs-in-github-prs-8hg"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nWhen 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.\n\nThe 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.\n\nRepetitive 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.\n\nTechnically, 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.",
  "summary": "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,…",
  "key_points": [
    "Software developer created gh-pixel-diff extension for GitHub PRs.",
    "Extension adds pixel diff functionality within PRs without installation.",
    "Users can save comparison views as PNG files for review comments."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}