LinkedIn Modal Dragger Chrome Extension

A Chrome Extension that makes LinkedIn's native "Add a note" modal draggable while preserving all original functionality.

🎯 MVP Scope

Do exactly this:

• Make LinkedIn's native "Add a note" modal draggable
• Detect when the modal appears; add a visible drag handle
• Allow moving it anywhere inside the viewport
• Preserve focus, Escape-to-close, and ARIA attributes
• Do not interfere with typing inside the textarea
• Persist last position for the session
• Constrain to the viewport so it can't get lost off-screen

✨ Features

• Automatic Detection: Automatically detects LinkedIn's "Add a note" modal
• Draggable: Click and drag the handle to move the modal anywhere on screen
• Non-Intrusive: Preserves all native LinkedIn functionality
• Viewport Constrained: Modal can't be dragged off-screen
• Session Persistence: Remembers position during the current session
• Clean Integration: Adds a subtle drag handle without disrupting the UI

🚀 Installation

Quick Setup

1. Download/Clone this repository to your local machine
2. Open Chrome and navigate to chrome://extensions/
3. Enable Developer Mode by toggling the switch in the top right corner
4. Click "Load unpacked" button
5. Select the folder containing the extension files
6. Navigate to LinkedIn - the extension will automatically activate

🎮 How to Use

1. Go to LinkedIn and navigate to any profile or connection
2. Click "Add a note" or similar button that opens the note modal
3. Look for the drag handle (⋮⋮) in the top-right corner of the modal
4. Drag the handle to move the modal anywhere on screen
5. Type your note normally - all functionality is preserved
6. Close with Escape or the close button as usual

🔧 Technical Implementation

• Content Script: Automatically injects on LinkedIn pages
• Modal Detection: Uses MutationObserver to detect modal creation
• Drag Functionality: Adds drag handle and mouse event handling
• Style Preservation: Stores and restores original modal styles
• Position Constraint: Prevents modal from going off-screen
• Session Storage: Saves position in Chrome local storage

📁 File Structure

linkedin-modal-dragger/
├── manifest.json          # Extension configuration (Manifest V3)
├── content.js            # Main content script for modal enhancement
├── background.js         # Simple background service worker
└── README.md             # This documentation

🎨 What You'll See

• LinkedIn's native modal with all original styling and functionality
• Small drag handle (⋮⋮) in the top-right corner of the modal
• Smooth dragging when you click and hold the handle
• Modal stays within viewport - can't be lost off-screen
• Position remembered during your current session

🔒 Privacy & Security

• LinkedIn Only: Only activates on LinkedIn domains
• No Data Collection: Doesn't collect or transmit any personal data
• Local Storage: Position data stored locally in your browser
• Session Only: Position data expires after browser session ends

🐛 Troubleshooting

Modal Not Draggable?

• Ensure you're on LinkedIn (linkedin.com)
• Refresh the page after installing the extension
• Check browser console for any error messages
• Verify the extension is enabled in chrome://extensions/

Drag Handle Not Visible?

• Look for the small ⋮⋮ symbol in the top-right of the modal
• The handle appears as a small dark button
• Make sure you're using LinkedIn's "Add a note" functionality

Extension Not Working?

• Check that you're on a LinkedIn page
• Ensure the extension is loaded and enabled
• Try refreshing the LinkedIn page
• Check browser console for errors

🚀 Development

Making Changes

1. Edit the source files
2. Go to chrome://extensions/
3. Click the refresh button on your extension
4. Refresh the LinkedIn page to see changes

Testing

• Test on different LinkedIn pages (profiles, connections, etc.)
• Verify modal detection works consistently
• Ensure dragging doesn't interfere with typing
• Test viewport constraints work properly

🌐 Browser Compatibility

• Chrome: 88+ (Manifest V3 support)
• Edge: 88+ (Chromium-based)
• Opera: 74+ (Chromium-based)
• Brave: 1.20+ (Chromium-based)

📝 License

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

🤝 Contributing

Feel free to submit issues, feature requests, or pull requests to improve the extension.

---

Now you can move LinkedIn's note modal anywhere on screen while keeping all the native functionality! 🎉