Skip to content
/ hazel Public

The World First Cloud-based browser automation recorder with auto bypass captcha and dynamic variable temp

Notifications You must be signed in to change notification settings

zhinea/hazel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

17 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฌ Hazel: Browser Recorder ๐ŸŽฌ

image

Demo

demo.mp4

โœจ Automate Your Browser Like Magic! โœจ

Hazel is a powerful Chrome extension that lets you record, save, and replay your browser interactions with cloud synchronization capabilities. Say goodbye to repetitive tasks! ๐ŸŽ‰

๐Ÿš€ Awesome Features

๐Ÿ“น Recording Superpowers

  • ๐Ÿ–ฑ๏ธ Capture Every Move: Clicks, typing, form submissions, navigation - we've got it all!
  • โฏ๏ธ Pause & Resume: Take a break when needed and pick up right where you left off
  • ๐Ÿ”„ Dynamic Variables: Set up flexible values that change during playback (plain text, AI-generated, or API)
  • ๐Ÿ“Š Visual Tracking: Sleek recording toolbar shows status with real-time event counter

โ–ถ๏ธ Magical Playback

  • ๐ŸŽฏ Precision Replay: Watch Hazel faithfully recreate your recorded actions
  • ๐Ÿง  Smart Element Finding: Multiple fallback strategies ensure playback works even when pages change
  • ๐Ÿ›ก๏ธ Error Recovery: Hazel tries to keep going even when unexpected changes occur

โ˜๏ธ Cloud Powers

  • ๐Ÿ” Secure Auth: Easy and secure cloud authentication
  • ๐Ÿ”„ Sync Anywhere: Access your recordings across devices
  • โœˆ๏ธ Offline Mode: Works without internet using local storage

๐Ÿ’ป Installation

  1. ๐Ÿ“ฅ Download the repository
  2. ๐Ÿงฉ Open Chrome and navigate to chrome://extensions/
  3. ๐Ÿ‘จโ€๐Ÿ’ป Enable "Developer mode" in the top right
  4. ๐Ÿ“ Click "Load unpacked" and select the extension directory
  5. ๐ŸŽ‰ The Browser Recorder icon will appear in your Chrome toolbar!

๐ŸŽฎ How to Use

๐ŸŽฅ Recording Like a Pro

  1. ๐Ÿ–ฑ๏ธ Click the Hazel extension icon
  2. โœ๏ธ Give your recording an awesome name
  3. ๐Ÿš€ Hit "Start Recording"
  4. โš™๏ธ In the settings modal:
    • Configure recording options
    • Add any custom variables you need
    • Click "Start Recording" to launch!
  5. ๐ŸŽฌ The recording toolbar appears in the top-right corner
  6. ๐ŸŽญ Do your thing! Hazel is watching (in a good way)
  7. โน๏ธ Use the toolbar to pause/resume or stop recording

โ–ถ๏ธ Playback Magic

  1. ๐Ÿ“‚ Open the Hazel extension popup
  2. ๐Ÿ” Find your recording in the list
  3. โ–ถ๏ธ Click "Play" and sit back
  4. ๐Ÿช„ Watch as Hazel recreates your actions perfectly!

๐Ÿ—‚๏ธ Project Structure

  • background.js: ๐Ÿง  The brain of the operation
  • content/ directory: ๐Ÿ› ๏ธ Scripts that work within web pages
    • content-script.js: ๐Ÿ Main entry point
    • recorder.js: ๐ŸŽฅ Captures your interactions
    • player.js and player-new.js: โ–ถ๏ธ Replays your recordings
    • recording-toolbar.js: ๐Ÿ“Š The UI you see while recording
    • recording-settings-modal.js: โš™๏ธ Configuration screen
    • api-service.js and auth-helper.js: ๐Ÿ”Œ API communication
  • popup/ directory: ๐Ÿ’ป Extension popup interface
  • lib/ directory: ๐Ÿงฐ Shared utilities
  • manifest.json: ๐Ÿ“ Extension configuration

๐ŸŒŸ Features Spotlight

๐Ÿ”ฎ Custom Variables - Three Flavors!

  1. ๐Ÿ“ Plain Text: Simple static values - "admin@example.com"
  2. ๐Ÿค– AI Generated: Dynamic values created by AI - "random product name"
  3. ๐ŸŒ API Response: Real-time data from APIs - "current stock price"

๐Ÿ”‘ Secure Authentication

Hazel connects securely with the cloud platform using OAuth authentication. Your data stays safe! ๐Ÿ”’

๐ŸŽฏ Smart Element Targeting

During playback, Hazel uses these strategies to find elements (in order):

  1. โœ… Exact CSS selector
  2. ๐Ÿ”„ Simplified selector without nth-child parts
  3. ๐Ÿ†” ID-based selection
  4. ๐Ÿ“Š Attribute-based selection
  5. ๐Ÿ“‹ Name-based selection for form elements

This smart approach ensures reliable playback even when websites change! ๐Ÿ’ช

๐ŸŒ API Integration

Hazel talks smoothly with its cloud API to:

  • โœ… Verify your login
  • ๐Ÿ’พ Save recordings to the cloud
  • ๐Ÿ“ฅ Download your recordings anywhere
  • ๐Ÿ—‘๏ธ Manage your library

๐Ÿ‘จโ€๐Ÿ’ป Development

๐Ÿ“‹ Prerequisites

  • ๐ŸŒ Chrome browser
  • ๐Ÿ“ฆ Node.js (for future enhancements)

๐Ÿ”ง Local Development

  1. ๐Ÿ“ Make your code changes
  2. ๐Ÿ”„ Reload the extension in chrome://extensions/
  3. ๐Ÿงช Test your amazing improvements!

๐Ÿ”ฎ Future Magic Coming Soon

  • ๐Ÿ–ฑ๏ธ Support for complex interactions like drag and drop
  • ๐Ÿš€ Enhanced API capabilities
  • ๐Ÿ‘ฅ Team sharing of recordings
  • ๐Ÿ’ช Even better error recovery
  • ๐Ÿง  Conditional logic in recordings

๐Ÿ†˜ Troubleshooting

  • ๐Ÿšซ Recording not starting? Check you're not on a restricted page (chrome://, extension pages)
  • โŒ Playback misbehaving? Try recording again with the latest version
  • ๐Ÿ”‘ Authentication issues? Log in again through the cloud platform

License

Copyright (c) 2025 Hazel Browser Recorder Team Permission is hereby granted, free of charge, to any person obtaining a copy of this software to use, modify, and contribute to the software, subject to the following conditions:

No Repository Cloning: The creation of public repositories containing substantially similar code to this project is prohibited. This includes direct copies, forks that are made public, or derivative works that maintain the core functionality of this software. Contributions Welcome: Contributions to the original repository through pull requests are encouraged and welcome. Personal Use: Users may modify and use the software for personal or internal organizational use. No Commercial Distribution: The software may not be commercially distributed as-is or in modified form without explicit permission from the copyright holders.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact

For any questions or feedback, please reach out to zidna.dev@gmail.com.


๐ŸŒŸ Made with love for productive people! ๐ŸŒŸ

Stop repeating yourself. Start recording with Hazel! โœจ

About

The World First Cloud-based browser automation recorder with auto bypass captcha and dynamic variable temp

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published