Better GitHub Image Diff

🖼️ Enhanced image comparison for GitHub's Pull Request reviews

Improve your GitHub Pull Request review experience with powerful image comparison tools. Compare images with precision using overlay and difference views, perfect for visual regression testing.

Installation • Features • Development Building Running

Features

Difference between the two images are shown in different ways:

• Overlay : shows the different pixels overlayed on the new image
• Difference : shows the different pixels in a new image

Zoom can be configured in the settings, with configurable Zoom Increase (%).

Customization

The extension allows to customize the available pixelmatch settings, and the default difference algorithm to show on page load.

Installation

For non-development installation, please refer to the Chrome and Firefox store links at the top of this readme.

Installation (development)

Install the required packages by running:

pnpm i

Development

To run the extension in development mode, run the following commands:

pnpm dev:chromium

pnpm dev:firefox

Building

To build the extension, run the following commands:

pnpm build:chromium

pnpm build:firefox

Running

To run the extension after building, run the following commands, for Google Chromium and Mozilla Firefox respectively:

pnpm start:chromium
pnpm dev:chromium # with hot reload

pnpm start:firefox
pnpm dev:firefox # with hot reload

E2E

E2E tests run in CI, but you can locally run them with:

pnpm exec playwright install # if not installed already
pnpm e2e

Packing

If you wish to pack the extension to manually load it on a browser, you can run, for Google Chromium and Mozilla Firefox, respectively:

pnpm pack:chromium

pnpm pack:firefox

Installation

Chromium

1. Clone the repository and install the dependencies using pnpm i
2. Run pnpm build:chromium to build the extension
3. Open a Chromium-based browser and go to chrome://extensions/
4. Enable Developer mode
5. Click on Load unpacked and select the dist folder

Firefox

1. Clone the repository and install the dependencies using pnpm i
2. Run pnpm build:firefox to build the extension and pnpm pack:firefox to prepare it for installation
3. Open Firefox and go to about:debugging#/runtime/this-firefox
4. Click on Load Temporary Add-on... and select the .zip package in the web-ext-artifacts folder