Building SuperClap, a browser extension for Medium
This project was completed over a two-week period by me as the Project Lead and Software Engineer, along with Ayomide Oladele, our Interface Designer. The goal of this project was to create a tool that would allow users to show appreciation for articles on Medium with an easier process, enhancing engagement without the default repetitive clapping process.
I have always enjoyed reading and engaging with online content. However, finding time to engage meaningfully with content quickly became a challenge, especially on Medium (which is the main platform I read articles from). The idea for SuperClap emerged from this struggle. I wanted to create a tool that made it easy to show appreciation for articles without spending too much time clicking on the clap button repeatedly.
This project combines my love for reading, present technical skills and the crazy urge to automate things with code, but it also aims to enhance the user experience on Medium for both readers and authors.
Project Accomplishments
To achieve our goals, we decided to build a browser extension that would work across all major browser engines. This extension was built in JavaScript using the popular browser extension framework, Plasmo. Our solution uses the DOM to directly manipulate the amount of claps one can give in a medium article while seamlessly integrating in the user's browser all at once.
Here are the key features we implemented:
Easy Clapping: Users can automate claps by having custom "single click" clap buttons, making it easier and faster to show appreciation. With this feature, readers no longer need to repeatedly click the clap button to show their support for an article. Instead, they can simply click once, and the extension will automatically generate the desired number of claps. This saves time and effort, allowing users to engage more efficiently with the content they enjoy.
User-Friendly Interface: An intuitive and clean design that integrates with Medium. Users can choose a variable number of claps for each button, providing a customizable experience. The interface is not only responsive and visually appealing, it also includes tooltips and prompts to guide users, ensuring even non-tech-savvy individuals can use the extension effectively. This design enhances the overall user experience, making it efficient and pleasant to show appreciation for articles on Medium.
Engagement Metrics: Through the custom clap buttons, authors have seen more engagement on their articles. This gives better metrics on how well an article is received. By automating the clapping process, authors are able to get more accurate data on which articles readers like the most. This data is very useful as it helps them understand which topics and writing styles work best. More engagement also leads to higher visibility on the platform, as articles with more claps are often promoted by Medium's algorithm.
Overall, this project makes it easier to show appreciation for content and gives authors better insights into their audience's preferences.
Technical Challenge
One of the most significant challenges we faced was ensuring the extension interacted seamlessly with Medium's dynamic content. Medium articles load content dynamically, making it challenging to consistently find and interact with the clap button. This dynamic nature meant that traditional methods of locating elements on the page were unreliable, as the elements could change or reload at any time.
To solve this, I created a mutation observer that watched for changes in the DOM and adjusted the extension's behaviour accordingly. The mutation observer continuously monitors the page for any new elements or changes to existing ones. When it detects a change, it triggers a function that re-evaluates the location of the clap button and updates the extension's interaction logic. This approach ensured that our extension remained responsive to content changes, regardless of when or how they occurred.
Additionally, I had to ensure that the mutation observer did not negatively impact the performance of the extension or the Medium page itself. This involved optimizing the observer to only watch for specific types of changes and limiting the frequency of its checks. By fine-tuning these parameters, I was able to achieve a balance between responsiveness and performance.
As a result, the extension now reliably finds and interacts with the clap button, ensuring a seamless user experience even as new content loads dynamically. Users can effortlessly show their appreciation for articles without encountering any glitches or delays.
This project was also the first time I worked on building a browser extension, so it was a significant learning process as well as a technical challenge. I had to familiarize myself with the browser extension APIs, understand how to manipulate the DOM effectively, and ensure that the extension was compatible with different browsers. Through this experience, I was able to gain new skills in web development, learning how to tackle complex problems in a dynamic and largely unfamiliar environment.
Learnings
Through this project, I gained a better understanding of Chrome extension APIs and their extensive capabilities. I learned how to effectively handle dynamic content changes using mutation observers, allowing the extension to respond to changes in real-time without compromising performance. This particularly involved a lot of trial and error, as I had to optimize the observer to monitor specific types of changes and limit the frequency of its checks to avoid any negative impact on the Medium page's performance.
Personally, I also came to understand the importance of user experience in application design. Ensuring that the extension provided a seamless glitch-free interaction with the clap button was really important. This experience was my first in creating tools that not only simplify tasks but also enhances productivity for its users, and it was super exciting to see the extension work in production, allowing users to show their appreciation for articles effortlessly.
Moving forward, I plan to add more features to the extension, such as personalized engagement statistics that provide users with a summarized dashboard of their Medium activity, especially on articles they enjoyed reading.
I also hope to explore other platforms and tools to further enhance user engagement and provide a richer experience. This project has been a significant learning journey, and I am excited about the potential improvements and new functionalities that can be integrated to make the extension even more valuable.
About Me ☯️
My name is Sodiq "Ade" Sanusi. I am currently a Software Engineering student at ALX Africa, and I lead the development of SuperClap for Medium. SuperClap aims to enhance user engagement on Medium, and you can always check out the project on GitHub to see features or changes you might be interested in adding.
The public live version of the extension will be available on the Chrome Web Store later this month, and on the Mozilla Add-ons Store before the end of August.
GitHub Repository: SuperClap's GitHub
Deployed Project Page: SuperClap Landing Page
LinkedIn Profile: Sodiq "Ade" Sanusi