142 lines
4.0 KiB
Markdown
142 lines
4.0 KiB
Markdown
# Hydra Browser
|
|
|
|
A visual web browser that displays websites in draggable windows on a canvas, with visual wire connections showing your browsing trail. Built with Electron.
|
|
|
|
## Features
|
|
|
|
- **Visual Canvas Interface**: Browse websites in floating windows on an infinite canvas
|
|
- **Draggable Windows**: Move browser windows freely around the canvas
|
|
- **Wire Connections**: Visual links between parent and child windows (future: click interception)
|
|
- **CORS Bypass**: Built-in proxy server to load any website
|
|
- **Dark Theme**: Modern, developer-friendly UI
|
|
|
|
## Installation
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Usage
|
|
|
|
1. Start the application:
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
2. Enter a URL in the input field (e.g., `https://example.com`)
|
|
3. Click "Go" or press Enter
|
|
4. The website will load in a new window on the canvas
|
|
5. Drag windows by their title bar
|
|
6. Close windows with the red close button
|
|
|
|
## Keyboard Shortcuts
|
|
|
|
- **Cmd/Ctrl + T**: Focus URL input
|
|
- **Cmd/Ctrl + W**: Close active window
|
|
- **ESC**: Clear URL input
|
|
|
|
## Architecture
|
|
|
|
### Components
|
|
|
|
- **Main Process** (`src/main/index.js`): Electron app initialization and lifecycle
|
|
- **Proxy Server** (`src/server/proxy.js`): Express server to bypass CORS restrictions
|
|
- **Renderer Process** (`src/renderer/`): UI and application logic
|
|
- `index.html`: Main UI structure
|
|
- `app.js`: Application initialization and event handling
|
|
- `canvas-manager.js`: Manages canvas, windows, and wire connections
|
|
- `window-manager.js`: Individual browser window logic
|
|
- `styles.css`: UI styling
|
|
|
|
### How It Works
|
|
|
|
1. **Proxy Server**: Runs on `localhost:3001` and fetches web content to bypass CORS
|
|
2. **Electron Window**: Displays the canvas interface
|
|
3. **Browser Windows**: Each website is loaded in an iframe within a draggable window
|
|
4. **Wire Rendering**: SVG paths connect parent and child windows
|
|
|
|
## Development
|
|
|
|
Run in development mode with DevTools:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
hydra/
|
|
├── package.json
|
|
├── README.md
|
|
└── src/
|
|
├── main/
|
|
│ └── index.js # Electron main process
|
|
├── server/
|
|
│ └── proxy.js # Proxy server
|
|
└── renderer/
|
|
├── index.html # Main UI
|
|
├── app.js # Application logic
|
|
├── canvas-manager.js # Canvas management
|
|
├── window-manager.js # Window management
|
|
└── styles.css # Styling
|
|
```
|
|
|
|
## Future Enhancements
|
|
|
|
- **Link Interception**: Automatically open clicked links in new connected windows
|
|
- **Multiple Windows**: Better support for managing many windows simultaneously
|
|
- **Canvas Pan/Zoom**: Navigate large browsing trails
|
|
- **Session Persistence**: Save and restore browsing sessions
|
|
- **Window Minimize/Maximize**: Full window management
|
|
- **Bookmarks**: Quick access to favorite sites
|
|
- **History**: Track browsing history
|
|
- **Search**: Find windows by URL or title
|
|
|
|
## Troubleshooting
|
|
|
|
### Port 3001 already in use
|
|
If the proxy server fails to start, another process may be using port 3001. Either:
|
|
- Stop the conflicting process
|
|
- Change the port in `src/server/proxy.js` and `src/renderer/window-manager.js`
|
|
|
|
### Websites not loading
|
|
Some websites have strict security policies that prevent them from being embedded:
|
|
- Try the desktop version of the site
|
|
- Some sites block iframes entirely (banking sites, social media)
|
|
- Check the browser console for specific errors
|
|
|
|
### Performance issues
|
|
- Limit the number of open windows (5-10 recommended)
|
|
- Close unused windows
|
|
- Some websites are resource-intensive
|
|
|
|
## Console Debugging
|
|
|
|
Open DevTools (View > Toggle Developer Tools) and use these commands:
|
|
|
|
```javascript
|
|
// Open a URL programmatically
|
|
app.openURL('https://example.com')
|
|
|
|
// Close active window
|
|
app.closeActiveWindow()
|
|
|
|
// Cascade all windows
|
|
app.cascadeAllWindows()
|
|
|
|
// Close all windows
|
|
app.closeAllWindows()
|
|
|
|
// Get canvas manager
|
|
app.getCanvasManager()
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|
|
|
|
## Credits
|
|
|
|
Built with Electron, Express, and modern web technologies.
|