Data Attribute Hover Checker

A Chrome extension that displays HTML elements' data attributes when hovering over them. Perfect for developers and testers who need to inspect data attributes without using developer tools.

Features

• Hover over any HTML element to view all its data attributes (data-*)
• Clearly formatted tooltip display with attribute names and values
• Works on any website
• Lightweight with minimal performance impact
• Automatically adjusts tooltip position to stay within viewport

Installation

From Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run build to build the extension
4. Load the extension in Chrome:
   • Go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist/src directory

For End Users

1. Download the latest span-data-hoverchecker.zip from the Releases section
2. Unzip the file
3. In Chrome, go to chrome://extensions/
4. Enable "Developer mode"
5. Click "Load unpacked" and select the unzipped directory

Usage

1. After installing the extension, navigate to any webpage
2. Hover over HTML elements to see their data attributes
3. The tooltip will show all data-* attributes with their names and values
4. Example: Hovering over <span data-id="123" data-name="example">Text</span> will display both the data-id and data-name attributes

Development

Build Process

This extension uses a custom build process to:

1. Generate multiple icon sizes from a source icon
2. Update the manifest to reference the correct icons
3. Create a zip file for distribution

Scripts

• npm run build - Clean the dist directory, copy files, generate icons, update manifest, and create zip
• npm run clean - Remove dist directory and create new structure
• npm run copy-files - Copy source files to dist/src
• npm run generate-icons - Generate multiple icon sizes
• npm run update-manifest - Update manifest.json to reference all icons
• npm run zip - Create zip file in dist directory

Project Structure

span-data-hoverchecker/
├── dist/                      # Build output directory
│   ├── span-data-hoverchecker.zip  # ZIP file for distribution
│   └── src/                   # Compiled extension files
├── scripts/                   # Build scripts
│   ├── generate-icons.js      # Generates multiple icon sizes
│   └── update-manifest.js     # Updates manifest.json
├── src/                       # Source files
│   ├── background.js          # Background script
│   ├── content.js             # Content script
│   ├── icons/                 # Icon source files
│   ├── manifest.json          # Extension manifest
│   ├── popup.html             # Popup HTML
│   └── styles.css             # Styles for content script
└── package.json               # Project configuration