Local Installation Guide for "Nile WebComponents Highlighter" Chrome Extension

Prerequisites

To install this extension, you need:

  1. Google Chrome browser
  2. The extension's ZIP file, which you can download from this URL: Nile WebComponents Highlighter (v0.0.8)

Steps

  1. Download the ZIP file: Use the link provided above to download the extension's ZIP file.
  2. Extract the ZIP file: Locate the downloaded ZIP file on your computer and extract it.
  3. Open the Chrome extensions page: In your Chrome browser, go to chrome://extensions. Alternatively, you can access this page by clicking on the menu icon (three vertical dots in the top-right corner of the browser), then selecting More Tools > Extensions.
  4. Enable Developer mode: On the chrome://extensions page, there's a switch in the top-right corner labeled Developer mode. Make sure this switch is turned on.
  5. Load unpacked extension: Click on the Load unpacked button, which becomes visible when Developer mode is enabled. This will open a file selection dialog.
  6. Select the extension's directory: In the file selection dialog, navigate to the directory where you extracted the ZIP file, select it, and click Open. The extension should now appear in your browser's extensions list.
  7. Pin the extension: The extension may not immediately be visible in your browser's toolbar. To make it visible, you need to pin it. Click the Extensions icon (a puzzle piece) in the browser's toolbar, find "Nile WebComponents Highlighter" in the dropdown list, and click the pin icon next to it.
  8. Enable highlighting components: Click the "Nile WebComponents Highlighter" icon in the browser's toolbar to open its popup interface, then enable the 'Highlight Components' feature. Once enabled, all Nile WebComponents on the current web page will be highlighted with a red box.
  9. Remove highlights: You can remove the red highlights from the web components by unchecking the 'Highlight Components' option in the extension's popup interface.

Video Tutorial

If you'd like a visual guide to follow along, you can watch our tutorial video on Loom: Video tutorial