Settings

Customize ScrapeStudio to match your workflow and preferences through the comprehensive Settings panel.

Accessing Settings

There are two ways to access the Settings panel:

1. Click the icon in the ScrapeStudio menu
2. Use the keyboard shortcut Alt+S

Settings Categories

General Settings

Control the appearance and behavior of ScrapeStudio:

Primary Color

Choose the primary color used throughout the extension:

• Select from preset colors
• Set a custom color using a hex code
• The primary color affects the highlight color, buttons, and UI elements

Border Appearance

Select how borders are displayed when highlighting elements:

UI Theme

Choose between light and dark themes for the extension UI:

• Auto: Follow your browser's theme setting
• Light: Use light theme
• Dark: Use dark theme

Framework Settings

Configure how code is generated:

Default Framework

Set your preferred framework for code generation:

Component Format

Choose between different component formats (for React):

• Functional Components: Modern function-based components
• Class Components: Traditional class-based components
• TypeScript: Generate TypeScript components

Style Format

Select your preferred styling approach:

• Inline Styles: Styles applied directly to elements
• CSS Modules: Styles in separate CSS module files
• Styled Components: Styles using the styled-components library

Keyboard Shortcuts

ScrapeStudio provides convenient keyboard shortcuts that you can customize:

To customize a shortcut:

1. Open the Settings panel
2. Navigate to the Keyboard Shortcuts section
3. Click on the shortcut you want to change
4. Press the new key combination
5. Click Save

Advanced Settings

Storage Options

Configure how components are stored:

• Local Storage: Store components in browser storage
• Cloud Storage: Sync components to your ScrapeStudio account
• Auto-Sync: Automatically sync components to the cloud

Performance Settings

Optimize performance based on your system:

• Animation Quality: Adjust animation smoothness
• Highlight Performance: Balance between responsiveness and accuracy
• Background Processing: Enable/disable background processing

Saving Settings

Settings are automatically saved when you make changes. Your settings are:

• Stored locally in your browser
• Synced to your ScrapeStudio account (if logged in)
• Applied immediately to the extension