I Did That - Firefox Extension

This week our team have created a Firefox browser extention that adds an image to all whitehouse.gov pages for accountability. The image can be dragged freely, and its position is saved even after a page refresh.

🛠 Features

• 🖼 Adds an image to all whitehouse.gov pages.
• 📌 Movable - Drag the image anywhere on the screen.
• 💾 Saves position - The image stays in place even after a refresh.
• ✋ Prevents interference - Clicks won’t affect the webpage’s content.

  Team Collaboration and Progress

Our journey began with brainstorming sessions to define the extension’s purpose and core features. We collectively decided on an image overlay tool that promotes accountability by allowing users to associate specific content with a visual marker.

Challenges Faced

1.	Technical Integration: Implementing the draggable feature while ensuring the image’s position persists posed a significant challenge. We had to delve into the nuances of the WebExtensions API to achieve the desired functionality.
2.	Cross-Team Communication: Coordinating tasks and ensuring seamless communication among team members, especially in a remote setup, required the adoption of effective collaboration tools and regular updates.

Positive Outcomes

•	Skill Enhancement: This project provided an opportunity for team members to familiarize themselves with browser extension development, particularly using the WebExtensions API.
•	Strengthened Team Dynamics: Regular meetings and collaborative problem-solving fostered a sense of camaraderie and improved our collective efficiency.

Personal Contributions and Reflections

In this project, I took on the role of integrating the draggable functionality and ensuring the image’s position persisted across sessions. This involved researching and implementing local storage solutions to save the image’s coordinates, a task that significantly enhanced my understanding of client-side storage mechanisms.

Key Contributions

•	Draggable Feature Implementation: Developed the functionality allowing users to move the image freely on the page.
•	Persistent Positioning: Ensured that the image’s location is saved and restored upon page reloads, enhancing user experience.

Personal Insights

This collaborative endeavor revealed my aptitude for problem-solving under pressure and highlighted the importance of clear communication in a team setting. I discovered a newfound interest in browser extension development and gained confidence in navigating unfamiliar technical territories.