The Uiprobe Chrome Extension provides a lightweight, frictionless way for frontend developers and UI designers to initiate visual validation scans directly from the live web page they are working on. It's a key part of Uiprobe's strategy to embed visual validation into your daily browser environment, making it quick, accessible, and seamless.
Key Benefits
- Zero-touch workflow: Create probes directly from your browser without switching applications.
- Instant on-demand checks: Quickly validate your work and get instant feedback after code changes.
- Localhost support: The extension is the recommended way to validate webpages running on a local host, as the main Uiprobe web application cannot directly access them.
- Seamless integration: It integrates smoothly into existing development and design workflows.
How to Install the Uiprobe Chrome Extension
- Navigate to the Chrome Web Store.
- Search for "Uiprobe."
- Click "Add to Chrome" and follow the on-screen instructions to install the extension.
How to Create a New Probe with the Extension
Once installed, the extension makes it easy to create a new probe for the webpage you're currently viewing.
- Navigate to the webpage you wish to validate.
- Click the Uiprobe extension icon in your browser's toolbar.
- If you are not signed in, a sign-in button will appear, directing you to the Uiprobe web application to authenticate.
- If you are signed in, the extension's popup will open, and you will be prompted to provide a Figma design URL. The current webpage's URL is automatically used for the comparison.
- Provide a Figma Frame ID if it is not already present in the URL.
- Click "Initiate Comparison" to start the scan. Uiprobe will process the probe and link you to the full report in the web application.
How to Update an Existing Probe with the Extension
The extension also allows you to re-run a comparison for a webpage that has a previously created probe. This is perfect for checking your work after making a change.
- Navigate to the webpage for which a probe was previously created.
- Click the Uiprobe extension icon.
- The extension will recognize the existing probe and provide an option to "Update" it.
- Select the "Update" option to rerun the comparison. You will then be directed to the updated probe report in the Uiprobe web application
