Transform your browser into a productivity powerhouse with instant access to any website in a sleek, customizable sidebar
The Ultimate Chrome Extension for Seamless Multitasking
Load ANY website in a customizable sidebar • Bypass iframe restrictions • Multiple layout modes • Beautiful themes
Advanced Iframe Bypass Technology - Unlike other sidebar extensions that fail with sites like ChatGPT, Claude, or Notion due to iframe restrictions, SidebarAnything uses sophisticated header modification techniques to load ANY website seamlessly.
SidebarAnything revolutionizes your browsing experience by providing instant access to your favorite websites without the chaos of tab juggling. Whether you're a developer consulting documentation, a researcher comparing sources, or an AI enthusiast switching between multiple tools, this extension is your productivity game-changer.
Empower users to keep their essential tools at their fingertips while maintaining focus on their primary workflow.
As a developer constantly switching between documentation, AI tools, and reference materials, I was frustrated by the endless tab chaos that killed my productivity. Existing sidebar extensions failed miserably with modern sites like ChatGPT and Claude due to iframe restrictions, forcing me back to the tab-juggling nightmare.
The breaking point came when I realized I was spending more time managing browser tabs than actually being productive. I needed a solution that could:
- Load ANY website without iframe restrictions holding me back
- Maintain my workflow without constant context switching
- Organize my tools in a way that actually made sense
- Look modern and professional - not like extensions from 2015
After months of research into Chrome's latest APIs and countless iterations, SidebarAnything was born. It's not just another sidebar extension - it's a complete reimagining of how we interact with multiple web tools simultaneously.
This extension exists because I believe your browser should work for you, not against you. Every feature was designed to solve real productivity pain points that I experienced daily as a developer and that thousands of others face every day.
Pre-configured with the most popular AI tools for instant productivity:
- ChatGPT - OpenAI's conversational AI
- Gemini - Google's advanced AI model
- Claude - Anthropic's helpful AI assistant
- Perplexity - AI-powered search engine
- OpenRouter - Access multiple AI models
- Grok - X's cutting-edge AI assistant
- 4 Beautiful Themes: Light, Dark, Auto (system), and Premium (gradient magic)
- Glassmorphism Effects: Modern frosted glass design with backdrop blur
- Smooth Animations: Buttery-smooth transitions and micro-interactions
- Responsive Design: Perfect on any screen size
- Premium Gradients: Eye-catching indigo-to-purple gradients
- Single View: Focus mode for maximum productivity
- Split View (2x1): Side-by-side comparison for research
- Quad View (2x2): Ultimate multitasking setup for power users
- Resizable Panels: Drag handles to adjust panel sizes dynamically
- Tab Management: Switch between multiple sites with elegant tabs
- Custom Groups: Organize sites by project, category, or workflow
- Drag & Drop: Intuitive site management (coming soon)
- Import/Export: Backup configurations in JSON format
- Smart Search: Find sites instantly with real-time filtering
- Quick Actions: Right-click context menus for power users
- Text Extraction: Copy content from any loaded site with one click
- Auto-Save: Never lose your configuration with smart persistence
- Reader Mode: Distraction-free reading experience
- Toast Notifications: Beautiful feedback system with animations
- Custom URLs: Add any website on-the-fly
graph TB
A["SidebarAnything"] --> B["Universal Site Support"]
A --> C["Advanced Layouts"]
A --> D["AI-First Design"]
A --> E["Modern UI/UX"]
A --> F["Zero Performance Impact"]
G["Other Extensions"] --> H["Limited Site Support"]
G --> I["Basic Layouts Only"]
G --> J["Generic Design"]
G --> K["Outdated Interface"]
G --> L["Resource Heavy"]
style A fill:#4F46E5,stroke:#312E81,stroke-width:3px,color:#fff
style G fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style B fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style C fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style D fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style E fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style F fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style H fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style I fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style J fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style K fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style L fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
| Feature | SidebarAnything | Sidekick | Workona | Arc Browser |
|---|---|---|---|---|
| Iframe Bypass | ✅ Advanced | ❌ Limited | ❌ Basic | |
| AI Sites Support | ✅ All Major | ❌ Few | ❌ None | |
| Layout Options | ✅ 3 Modes | ❌ 1 Mode | ❌ 2 Modes | |
| Theme System | ✅ 4 Themes | ❌ 2 Themes | ❌ 1 Theme | |
| Performance | ✅ Lightning Fast | ❌ Slow | ||
| Customization | ✅ Extensive | ❌ Limited | ❌ Basic | |
| Text Extraction | ✅ Built-in | ❌ None | ❌ None | ❌ None |
Pro Tip: Enable Developer Mode first to unlock the full potential of browser extensions.
# One-click install from Chrome Web Store
# Stay tuned for the official release!-
Clone the Repository
git clone https://github.com/vibheksoni/SidebarAnything.git cd SidebarAnything -
Install Dependencies
npm install
-
Build the Styles
npm run build
-
Load in Chrome
- Open
chrome://extensions/ - Toggle Developer mode ON
- Click Load unpacked
- Select the
SidebarAnythingfolder
- Open
Security Notice: Chrome may show security warnings for unpacked extensions. This is normal for developer installations and doesn't affect functionality.
- Installation: Follow the installation steps above
- Try AI Sites: Click the extension icon → Select any AI tool from the dropdown
- Explore Layouts: Use the layout buttons to switch between Single, Split, and Quad views
- Customize Theme: Click the theme button to try Light, Dark, Auto, or Premium themes
- Add Custom Sites: Use the "Custom URL" option to add any website
- Premium Theme: Unlock gradient backgrounds with glassmorphism effects
- Layout Switching: Seamlessly switch between layouts without losing loaded sites
- Text Extraction: Use the copy button to extract text from any loaded site
- Reader Mode: Toggle reader mode for distraction-free reading
- Settings Page: Access advanced configuration options
flowchart TD
A[User Clicks Extension] --> B[Popup Interface]
B --> C[Site Selection]
C --> D[Background Script]
D --> E[Header Modification]
E --> F[Iframe Creation]
F --> G[Site Loads in Sidebar]
H[Iframe Restrictions] --> I[X-Frame-Options: DENY]
H --> J[CSP: frame-ancestors]
H --> K[CORS Policies]
E --> L[Remove X-Frame-Options]
E --> M[Remove CSP Headers]
E --> N[Set CORS Headers]
L --> O[Bypass Complete]
M --> O
N --> O
O --> F
style A fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style G fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
style E fill:#4F46E5,stroke:#312E81,stroke-width:2px,color:#fff
style H fill:#EF4444,stroke:#B91C1C,stroke-width:2px,color:#fff
style O fill:#10B981,stroke:#047857,stroke-width:2px,color:#fff
- Vanilla JavaScript: Zero dependencies, maximum performance
- Tailwind CSS: Modern, utility-first styling with custom animations
- Chrome APIs: Storage, SidePanel, DeclarativeNetRequest, Scripting
- Responsive Design: Mobile-first approach with fluid layouts
- CSS Animations: Smooth, hardware-accelerated transitions
- Chrome Storage: Sync and local storage for data persistence
Most websites block iframe embedding using:
X-Frame-Options: DENY/SAMEORIGINContent-Security-Policy: frame-ancestors- CORS restrictions and security policies
Our Solution: Advanced header modification using Chrome's declarativeNetRequest API to remove these restrictions while maintaining security.
// Header modification implementation
async function setupHeaderModificationRules() {
await chrome.declarativeNetRequest.updateDynamicRules({
addRules: [{
id: 9999,
priority: 1,
action: {
type: "modifyHeaders",
responseHeaders: [
{ header: "x-frame-options", operation: "remove" },
{ header: "content-security-policy", operation: "remove" },
{ header: "access-control-allow-origin", operation: "set", value: "*" }
]
},
condition: { resourceTypes: ["main_frame", "sub_frame"] }
}]
});
}stateDiagram-v2
[*] --> Single
Single --> Split: User clicks Split View
Single --> Quad: User clicks Quad View
Split --> Single: User clicks Single View
Split --> Quad: User clicks Quad View
Quad --> Single: User clicks Single View
Quad --> Split: User clicks Split View
Single: Single View<br/>1 Panel Active
Split: Split View<br/>2 Panels Active
Quad: Quad View<br/>4 Panels Active
// Layout switching implementation
async function switchLayout(layout) {
currentLayout = layout;
// Hide all views
elements.singleView.classList.add('hidden');
elements.splitView.classList.add('hidden');
elements.quadView.classList.add('hidden');
// Show selected view
switch (layout) {
case 'single':
elements.singleView.classList.remove('hidden');
break;
case 'split-2':
elements.splitView.classList.remove('hidden');
break;
case 'split-4':
elements.quadView.classList.remove('hidden');
break;
}
chrome.storage.local.set({ sidebarLayout: layout });
}| Theme | Description | Features |
|---|---|---|
| 🌞 Light | Clean, minimal design | High contrast, easy on the eyes |
| 🌙 Dark | Modern dark interface | Reduced eye strain, battery saving |
| 🔄 Auto | Follows system preference | Seamless day/night transitions |
| ✨ Premium | Gradient magic | Indigo-purple gradients, glassmorphism |
The Premium theme includes:
- Gradient Backgrounds: Beautiful indigo-to-purple gradients
- Glassmorphism Effects: Frosted glass with backdrop blur
- Enhanced Animations: Smoother transitions and micro-interactions
- Premium Visual Elements: Elevated design aesthetics
/* Premium theme implementation */
.premium-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}
.glass-effect {
backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}SidebarAnything/
├── manifest.json # Extension configuration
├── src/
│ └── input.css # Tailwind CSS source
├── dist/
│ └── output.css # Compiled CSS
├── popup.html # Extension popup interface
├── popup.js # Popup functionality
├── options.html # Settings page
├── options.js # Settings functionality
├── sidebar.html # Main sidebar interface
├── sidebar.js # Core sidebar logic
├── background.js # Service worker
├── contentScript.js # Content script for text extraction
├── package.json # Dependencies and scripts
└── tailwind.config.js # Tailwind configuration
| Setting | Options | Default | Description |
|---|---|---|---|
| Theme | Light, Dark, Auto, Premium | Auto | Visual appearance |
| Layout | Single, Split-2, Split-4 | Single | Panel arrangement |
| Groups | Custom groups | All, AI | Site organization |
| Import/Export | JSON format | - | Data backup/restore |
Layout Customization:
- Single View: Perfect for focused work
- Split View (2x1): Ideal for comparison tasks
- Quad View (2x2): Ultimate multitasking setup
- Resizable Panels: Drag to adjust sizes
Theme Customization:
- Auto Theme: Automatically switches based on system preference
- Premium Theme: Includes gradient backgrounds and glass effects
- Custom CSS: Modify styles in
src/input.css
- Node.js (v14 or higher)
- npm (v6 or higher)
- Chrome Browser (v88 or higher)
-
Clone & Install
git clone https://github.com/vibheksoni/SidebarAnything.git cd SidebarAnything npm install -
Development Mode
npm run dev # Watch mode for CSS changes -
Build for Production
npm run build # One-time CSS build
| Script | Command | Description |
|---|---|---|
| Build | npm run build |
Compile CSS once |
| Dev | npm run dev |
Watch mode for development |
| Build CSS | npm run build-css |
Same as dev (alias) |
- Make Changes: Edit source files
- Build CSS: Run
npm run devfor watch mode - Reload Extension: Go to
chrome://extensions/and click reload - Test: Verify functionality in browser
We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help makes SidebarAnything better for everyone.
Bug Reports
- Check existing issues to avoid duplicates
- Create a detailed issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Browser version and OS
- Screenshots if applicable
Feature Requests
- Search existing requests first
- Open a feature request with:
- Clear description of the feature
- Use case and benefits
- Mockups or examples if possible
Code Contributions
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes following our coding standards
- Test thoroughly across different scenarios
- Commit with clear messages:
git commit -m 'Add amazing feature' - Push to your fork:
git push origin feature/amazing-feature - Open a Pull Request with detailed description
- Code Style: Follow existing patterns and use meaningful variable names
- Comments: Document complex logic and public functions
- Testing: Test your changes across different browsers and scenarios
- Performance: Keep the extension lightweight and fast
- Security: Never compromise user data or browser security
SidebarAnything is designed with privacy as a core principle:
- Local Storage Only: All data stays on your device
- No Tracking: We don't collect any personal information
- No External Servers: No data is sent to external services
- Open Source: Full transparency - inspect the code yourself
- Secure Header Modification: Only removes necessary headers for functionality
- Sandboxed Iframes: Sites run in isolated environments
- Minimal Permissions: Only requests necessary Chrome permissions
- Content Script Isolation: Limited access to page content
| Permission | Purpose | Why We Need It |
|---|---|---|
| storage | Save user preferences | Store groups, sites, and settings |
| sidePanel | Create sidebar interface | Core functionality |
| scripting | Text extraction | Copy content from loaded sites |
| tabs | Tab management | Open sites in sidebar |
| declarativeNetRequest | Bypass iframe restrictions | Load restricted sites |
| host_permissions | Access all URLs | Load any website in sidebar |
Core Features
- Keyboard Shortcuts: Lightning-fast navigation
- Global Search: Find any site across all groups instantly
- Mobile Support: Responsive design for mobile browsers
- Enhanced Onboarding: Interactive tutorials with animations
- Usage Analytics: Optional, privacy-focused usage insights
UI/UX Enhancements
- Custom Themes: User-created theme system
- Advanced Animations: More fluid transitions and micro-interactions
- Responsive Layouts: Better mobile and tablet support
- Custom Backgrounds: Upload your own backgrounds
- Particle Effects: Optional visual enhancements
Performance & Features
- Faster Loading: Optimized iframe loading and caching
- Cloud Sync: Optional cloud backup for settings
- Auto-Update: Automatic site list updates
- Smart Suggestions: AI-powered site recommendations
- Productivity Tools: Built-in notes and task management
- AI Integration: Smart site organization and recommendations
- Cross-Browser Support: Firefox, Safari, Edge compatibility
- Mobile App: Companion mobile application
- API Integration: Connect with external productivity tools
- Gamification: Achievement system for productivity
- Documentation: Check this README for comprehensive guides
- Issues: GitHub Issues for bugs and feature requests
- Discussions: GitHub Discussions for questions and ideas
- Email: Contact the maintainer for direct support
If SidebarAnything has improved your productivity, consider:
- Star this repository to show your appreciation
- Share on social media to help others discover it
- Contribute by reporting bugs or suggesting features
- Write a review when it's available on Chrome Web Store
This project is licensed under the MIT License - see the LICENSE file for details.
- Commercial Use: Use in commercial projects
- Modification: Modify and distribute
- Distribution: Share with others
- Private Use: Use for personal projects
- Liability: No warranty or liability
- Trademark Use: Cannot use project trademarks
- Tailwind CSS Team: For the amazing utility-first CSS framework
- Chrome Extensions Team: For powerful APIs and documentation
- Open Source Community: For inspiration and best practices
- Beta Testers: For valuable feedback and bug reports
- Contributors: Everyone who has helped improve SidebarAnything
- Tailwind CSS - Utility-first CSS framework
- Chrome Extensions API - Browser extension platform
- Mermaid - Diagram and flowchart generation
Join the productivity revolution and take control of your browser!
Made with ❤️ by Vibhek Soni
Star this repo if SidebarAnything has made your life easier! ⭐