Skip to content

Latest commit

 

History

History
330 lines (257 loc) · 10.8 KB

README.md

File metadata and controls

330 lines (257 loc) · 10.8 KB

Bolt to GitHub - Chrome Extension

A Chrome extension that automatically captures ZIP file downloads from bolt.new, extracts them, and pushes the contents to a specified GitHub repository. Built with Svelte, TypeScript, and TailwindCSS.

📦 Installation Options

Stable Version (Chrome Web Store)

Install from Chrome Web Store

Latest stable version (v1.1.1) includes the following features:

  • 🚀 Automatic ZIP file interception from bolt.new
  • 📦 In-browser ZIP file extraction
  • 🔄 Direct GitHub repository integration
  • 🔒 Secure credential storage
  • ⚡ Real-time processing status updates
  • 🎨 Clean, responsive UI with shadcn-svelte components
  • 📱 Modern, accessible interface
  • 🔄 Upload progress tracking
  • 🎯 Custom upload status alerts
  • ✨ Multi-repository support
  • 📄 Follow .gitignore rules for file uploads
  • ⚙️ Repo settings displayed in popup
  • ✉️ Custom commit messages
  • 💾 Automatically save new project settings
  • 📋 Projects tab with quick access to all your Bolt projects:
    • View all pushed projects in one place
    • Open projects directly in Bolt
    • Access GitHub repositories
    • Import existing GitHub repos into Bolt

Best Practices

  1. Always verify your repository settings before syncing a new project
  2. Double-check the repository name and branch when switching between projects

Latest Version (GitHub)

To try the latest development version:

  1. Clone and install:

    git clone https://github.com/mamertofabian/bolt-to-github.git
cd bolt-to-github
npm install

  2. Build the extension:

    npm run build

  3. Load in Chrome:

    • Open Chrome and go to chrome://extensions/
    • Enable "Developer mode" (top right)
    • Click "Load unpacked"
    • Select the dist directory from your project folder

Note: The GitHub version contains the latest features but may be less stable than the Chrome Web Store version.

Supported Browsers

  • Chrome
  • Brave

Installation

👉 For Users

Get started in just 3 simple steps:

  1. Install from Chrome Web Store

  2. Configure the Extension

    • Make sure you have a Bolt.new project loaded
    • Click the extension icon in your Chrome toolbar
    • Enter your GitHub token (needs repo permissions)
    • Repository Owner
    • Repository Name
    • Branch Name (defaults to 'main')
    • Save your settings and you're ready to go!

  3. Load your Bolt.new Project

    • Click on the GitHub button in the Bolt.new project page at the top right
    • Confirm the popup that appears
    • Done!

🚨 New to GitHub?

Follow these steps to get started:

  1. Create a GitHub account
  2. Generate a personal access token (needs repo permissions)

Need help? Watch our Quick Start Video Tutorial

🛠️ For Developers (Contributing)

If you want to modify the extension or contribute to its development:

  1. Set up your development environment:

    # Make sure you have Node.js v16 or later installed
node --version

  2. Clone and install:

    git clone https://github.com/mamertofabian/bolt-to-github.git
cd bolt-to-github
npm install

  3. Build for development:

    npm run watch   # For development with hot reload
# OR
npm run build  # For production build

  4. Load in Chrome:

    • Open Chrome and go to chrome://extensions/
    • Enable "Developer mode" (top right)
    • Click "Load unpacked"
    • Select the dist directory from your project folder

See our Contributing Guide for more details.

Project Structure

.
├── assets/                # Extension icons and assets
│   └── icons/            # Extension icons in various sizes
├── src/
│   ├── background.ts     # Extension background service
│   ├── content/          # Content scripts
│   │   ├── upload-status.ts
│   │   └── UploadStatus.svelte
│   ├── lib/             # Core library and utilities
│   │   ├── common.ts    # Common utilities
│   │   ├── constants.ts # Application constants
│   │   ├── github.ts    # GitHub API integration
│   │   ├── utils.ts     # Utility functions
│   │   ├── zip.ts       # ZIP file processing
│   │   └── components/  # Reusable UI components
│   │       ├── ui/      # shadcn-svelte UI components
│   │       ├── Footer.svelte
│   │       ├── GitHubSettings.svelte
│   │       ├── Header.svelte
│   │       ├── NotBoltSite.svelte
│   │       ├── SocialLinks.svelte
│   │       ├── StatusAlert.svelte
│   │       └── UploadProgress.svelte
│   ├── popup/           # Extension popup UI
│   │   ├── App.svelte   # Main popup component
│   │   ├── index.html   # Popup HTML template
│   │   └── main.ts      # Popup entry point
│   ├── services/        # Service modules
│   │   ├── buttonInjector.ts
│   │   └── zipHandler.ts
│   ├── styles/          # Global styles
│   └── types/           # TypeScript type definitions
├── manifest.json         # Chrome extension manifest
├── package.json         # Project dependencies and scripts
├── tailwind.config.js   # TailwindCSS configuration
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite build configuration

Tech Stack

Security

  • GitHub tokens are stored securely using Chrome's storage API
  • All communication with GitHub uses HTTPS
  • ZIP file processing happens entirely in the browser

Support & Resources

Documentation & Tutorials

Professional Support

Report Issues

For bugs or feature requests, please open an issue on the GitHub repository.

Support the Project

If you find this extension helpful, you can support its development:

Buy Me A Coffee

Your support helps maintain and improve this extension!

Contributing

  1. Fork the repository
  2. Create a feature branch
git checkout -b feature/my-new-feature
  1. Commit your changes
git commit -am 'Add some feature'
  1. Push to the branch
git push origin feature/my-new-feature
  1. Create a Pull Request

License

MIT License - see LICENSE file for details

Permissions

This extension requires the following permissions:

  • webRequest: To intercept downloads
  • downloads: To manage downloads
  • storage: To store settings
  • scripting: To interact with bolt.new

FAQ

Q: Why does the extension need a GitHub token?
A: The token is required to authenticate with GitHub's API for pushing files to your repository.

Q: Is my GitHub token secure?
A: Yes, your token is stored securely in Chrome's storage system and is only used for GitHub API calls.

Q: Can I specify which files to push to GitHub?
A: Currently, the extension processes all files in the ZIP. File filtering may be added in future versions.

Troubleshooting

Common Issues

  1. Extension not intercepting downloads

    • Ensure you're on bolt.new
    • Check if the file is a ZIP
    • Verify permissions are enabled

  2. GitHub push fails

    • Verify your token has repo permissions
    • Check repository name and owner
    • Ensure branch exists

  3. ZIP processing errors

    • Check if the ZIP file is corrupted
    • Ensure file contents are text-based

Future Enhancements

  • Let me know if you have any ideas for additional features or improvements by opening an issue on GitHub.

Acknowledgments

Created by AI-Driven Coder | Powered by Codefrost | Maintained by Mamerto Fabian

YouTube • Website • GitHub

Project Features

Projects Management

The extension includes a dedicated Projects tab that helps you:

  • Keep track of all your Bolt projects pushed to GitHub
  • Quick-access buttons to:
    • Open projects directly in Bolt
    • View repositories on GitHub
    • Import repositories back into Bolt
  • View branch information and project details at a glance