Team Collaboration on Browser Extension Development

With our team’s collaboration, we successfully developed a browser extension that allows users to open a sidebar for note-taking, supporting Markdown and LaTeX syntax. Users can save and load notes locally at any time, choosing their preferred storage path. We also provided separate panels for source code editing and previewing, enhancing user experience with a friendly interface.

Progress and Achievements

The most satisfying achievement was successfully implementing Markdown and LaTeX syntax rendering, allowing users to preview their notes in real-time. The extension supports both source code editing mode and preview mode, making the note-taking process more efficient.

Challenges Faced by the Team

Despite the progress, we encountered several challenges during development:

1. Markdown and LaTeX Rendering Issues: Direct compilation was not possible, and we had to find appropriate libraries for parsing and rendering.
2. Note Saving Path Issue: By default, notes were stored in Firefox’s download directory, but we wanted users to choose their preferred save location. To achieve this, we created a URL for targeted downloads.
3. Editing Mode Interaction Issue: Since we provided both source code mode and preview mode, managing the interaction between the two text boxes was complex. Size inconsistencies often occurred, which we resolved by encapsulating them into a class.
4. Undo Functionality: The extension did not support Ctrl+Z undo functionality, so we had to implement a custom save and undo logic to allow users to revert changes conveniently.

My Role and Contributions

Regarding team responsibilities, our collaboration was well-structured. I was mainly responsible for setting up the overall project structure and ensuring a logical division of functional modules. Specifically, I worked on the data integration between source code mode and preview mode, enabling seamless switching between the two. Additionally, I actively participated in discussions, identifying new features with teammates, testing each other’s work, and fixing errors promptly.

Personal Growth and Surprises

During this collaboration, I was surprised to discover my ability to quickly translate verbal discussions into code implementations. This skill allowed me to efficiently understand team requirements and immediately consider how to implement them in code, improving both development speed and team communication.

Conclusion

This project not only enhanced my technical skills but also deepened my understanding of the importance of teamwork. Clear division of tasks, timely communication, mutual testing, and iterative improvement are key factors for a smooth development process. Through this experience, I gained valuable insights into effective collaboration and look forward to participating in more team projects in the future.