Memos Chrome Extension

A Chrome extension built with React and TypeScript that allows you to quickly send text notes to a specified API endpoint.

🌟 Project Generated with Windsurf IDE: This project was bootstrapped and developed using Windsurf IDE, a next-generation development environment that leverages AI to streamline the development process. Windsurf IDE provides intelligent code generation, real-time assistance, and automated project setup, making it easier to create high-quality Chrome extensions.

Features

• 🚀 Modern React with TypeScript
• 💅 Clean and simple UI
• 🔒 Secure CSP configuration
• 📝 Text input with POST request functionality
• 🛠️ Built with Webpack 5
• 🤖 AI-assisted development with Windsurf IDE

Installation

1. Clone the repository:

git clone https://github.com/yourusername/memos-chrome.git
cd memos-chrome

2. Install dependencies:

pnpm install

3. Build the extension:

pnpm build

4. Load the extension in Chrome:
   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" in the top right
   • Click "Load unpacked" and select the dist directory from this project

Development

Project Structure

memos-chrome/
├── src/
│   └── popup/
│       ├── Popup.tsx      # Main popup component
│       ├── index.tsx      # Entry point
│       └── popup.css      # Styles
├── public/
│   ├── manifest.json      # Extension manifest
│   ├── popup.html        # Popup HTML template
│   └── icons/            # Extension icons
├── webpack.config.js     # Webpack configuration
├── tsconfig.json        # TypeScript configuration
├── README.md           # Project documentation
├── LICENSE            # MIT license
└── DEVELOPMENT_NOTES.md # Detailed development journey

Development Journey

This project was developed with the assistance of Windsurf IDE, and we've documented the entire development process, including challenges faced and solutions implemented. Check out DEVELOPMENT_NOTES.md for:

• Detailed technical decisions and their rationale
• Challenges encountered and their solutions
• Security considerations and implementations
• TypeScript migration process
• Icon generation techniques
• Future improvement ideas
• Learning outcomes

Generated with Windsurf IDE

This project was generated and developed using Windsurf IDE, which provided:

• Automated project scaffolding with best practices
• Intelligent code generation for React components
• TypeScript integration and type safety
• Webpack configuration optimization
• Security best practices implementation
• Automated icon generation
• Documentation generation

Available Scripts

• pnpm build: Build the extension for production
• pnpm watch: Build and watch for changes during development

Customizing Icons

The project includes a script to generate custom icons. Open public/generate_icons.html in a browser to generate new icons with different colors or text.

API Integration

The extension makes POST requests to http://example.com/api with the following structure:

interface RequestBody {
  input: string;
}

To use a different API endpoint, modify the URL in src/popup/Popup.tsx.

Security

This extension implements security best practices:

• Content Security Policy (CSP) configuration
• Production builds with minimal bundle size
• Type safety with TypeScript
• Secure external resource handling

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Windsurf IDE - Next-generation AI-powered development environment
• React
• TypeScript
• Chrome Extensions Documentation