Alt Attribute Inspector - Chrome Extension

A Chrome extension that helps you identify and inspect all images with filled alt attributes on web pages. This tool is particularly useful for web developers, accessibility auditors, and content creators who want to ensure proper alt text implementation.

Features

• Direct Page Highlighting: Highlights images with alt attributes directly on the webpage
• Toggle Functionality: Click the extension icon to turn highlights on/off
• Visual Feedback: Green borders and shadows around images with alt text
• Count Badge: Shows the total number of images with alt attributes found
• Tooltip Information: Hover over highlighted images to see their alt text
• Cross-page Support: Works on any website you visit
• No Popup Required: Simple click-to-toggle operation

Installation

Method 1: Build and Load (Recommended for Development)

1. Clone or Download this repository to your local machine
2. Install Dependencies: npm install
3. Build the Extension: npm run build
4. Open Chrome and navigate to chrome://extensions/
5. Enable Developer Mode by toggling the switch in the top-right corner
6. Click "Load Unpacked" and select the dist/ folder
7. Pin the Extension to your toolbar for easy access

Method 2: Quick Test (If Pre-built)

If the dist/ folder exists and contains compiled files:

1. Follow steps 4-7 from Method 1 above
2. Note: Run npm run build first if dist/ folder is missing

Method 3: Chrome Web Store (Future Release)

The extension will be available on the Chrome Web Store once published.

Usage

1. Navigate to any webpage you want to inspect
2. Click the Alt Attribute Inspector extension icon in your toolbar
3. Images with alt attributes will be highlighted with green borders and shadows
4. Hover over highlighted images to see their alt text in tooltips
5. Click the extension icon again to turn off the highlights
6. The extension badge shows "ON" when highlights are active

Testing

A demo page is included (demo.html) that contains:

• 9 images with good alt attributes (should appear in results)
• 3 images without alt attributes (should NOT appear in results)
• Various alt text styles and lengths
• Different image attributes (title, class, id, data-src)

Expected Results: When scanning the demo page, you should see exactly 9 images listed.

What It Detects

The extension identifies images that have:

• alt attribute with non-empty content
• Various image source formats (src, data-src, lazy loading, etc.)
• Different image types (img tags, picture elements, role="img" elements)

Technical Details

• Manifest Version: 3 (Latest Chrome extension standard)
• Permissions:
  • activeTab: Access to current tab content
  • scripting: Execute content scripts for scanning
• Content Scripts: Automatically injected into web pages
• TypeScript: Written in TypeScript for better code quality

File Structure

alt-plugin-chrome/
├── src/                    # TypeScript source files
│   ├── background.ts        # Background script
│   └── content.ts          # Content script
├── dist/                   # Compiled extension (generated)
│   ├── background.js       # Compiled background script
│   ├── content.js          # Compiled content script
│   ├── manifest.json       # Extension configuration
│   └── icons/              # Extension icons
├── icons/                  # Source icons
│   ├── icon16.png          # 16x16 icon
│   ├── icon48.png          # 48x48 icon
│   └── icon128.png         # 128x128 icon
├── store-assets/           # Chrome Web Store assets
├── build.js                # Main build script
├── build-store.js          # Store packaging script
├── manifest.json           # Source manifest
├── tsconfig.json           # TypeScript configuration
└── README.md               # This file

Development

Prerequisites

• Chrome browser (version 88+)
• Basic knowledge of Chrome extensions

Customization

• Modify popup.css to change the visual appearance
• Update content.js to add more scanning capabilities
• Adjust manifest.json for additional permissions or features

Building

The extension uses automated build scripts written in TypeScript. To build and develop:

Available Commands:

• npm run build - Compile TypeScript and prepare extension
• npm run dev - Build and show success message
• npm run store - Create Chrome Web Store package
• npm run clean - Remove compiled files
• npm run clean:all - Remove all generated files

Development Workflow:

1. Make changes to TypeScript files in src/
2. Run npm run build to compile
3. Reload extension in Chrome (chrome://extensions/)
4. Test your changes

Troubleshooting

Extension Not Working

• Ensure Developer Mode is enabled in Chrome extensions
• Check that the extension is loaded and pinned to toolbar
• Verify the webpage has images with alt attributes

No Results Found

• Some websites may use JavaScript to load images dynamically
• Try refreshing the page and scanning again
• Check if the page actually contains images with alt attributes

Permission Errors

• The extension only needs access to the current tab
• No personal data is collected or transmitted
• All processing happens locally in your browser

Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

License

This project is open source and available under the MIT License.

Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Review the Chrome DevTools console for error messages
3. Submit an issue on the project repository

Version History

• v1.0.0: Initial release with basic alt attribute scanning functionality

---

Note: This extension is designed for educational and development purposes. Always respect website terms of service and privacy policies when using web inspection tools.