Browser Extension

The Snapmark browser extension is a powerful tool that allows you to capture UI elements directly from any website and analyze their properties, styles, and structure.

Installation

Install the browser extension from your browser's extension store:

• Chrome: Install from Chrome Web Store or see Installation Guide
• Firefox: Coming Soon
• Safari: Coming Soon
• Edge: Available through Chrome Web Store

Getting Started

1. Activate the Extension

After installation, you'll see the Snapmark icon in your browser toolbar. Click it to activate the visual selector mode.

2. Select Elements

With the extension active:

• Hover over any element on the page to see it highlighted
• Click on an element to capture its information
• Use keyboard shortcuts for advanced selection modes

3. Analyze Elements

Once you've selected an element, the extension will show:

• CSS properties and computed styles
• HTML structure and attributes
• Accessibility information
• Performance metrics

Features

Visual Element Selection

• Hover Highlighting: See elements highlighted as you move your cursor
• Multi-Element Selection: Select multiple elements for comparison
• Nested Element Navigation: Navigate through parent and child elements

Element Analysis

• CSS Properties: View all applied styles and their sources
• Box Model: Visualize margins, padding, borders, and content
• Accessibility: Check ARIA attributes and accessibility compliance
• Performance: Analyze element rendering performance

Export and Integration

• Code Generation: Generate CSS selectors and XPath expressions
• Screenshot Capture: Take screenshots of selected elements
• IDE Integration: Send element data directly to your IDE
• API Integration: Use captured data with Snapmark API

Keyboard Shortcuts

Settings and Configuration

Access extension settings by:

1. Right-clicking the Snapmark icon
2. Selecting "Options" or "Settings"

Privacy and Security

The Snapmark browser extension:

• Only processes data when actively used
• Does not collect personal information
• Operates locally in your browser
• Respects website privacy policies

Troubleshooting

Common Issues

Extension not working on certain sites

• Some sites may block extension functionality
• Try refreshing the page and reactivating
• Check if the site has Content Security Policy restrictions

Elements not highlighting properly

• Ensure the extension has permission to access the site
• Try disabling other extensions that might interfere
• Check browser console for error messages

Performance issues

• Close unnecessary browser tabs
• Disable other extensions temporarily
• Clear browser cache and cookies

Need Help?

If you encounter issues with the browser extension:

• Visit our community forum
• Contact support through the extension settings