Creating a Chrome extension can be a great learning experience. It’s a fun project that can help you understand a little bit about how Chrome works. In our latest hackathon we built a Chrome extension to help us monitor our?Core Web Vitals?metrics and to raise awareness about performance.
The extension we built managed to collect a variety of metrics, and tell us whether they were good or needed improvement. This included:
- FID?— First Input Delay
- CLS?— Cumulative Layout Shift
- LCP?— Largest Contentful Paint
- FCP?— First Contentful Paint
- INP?— Interaction to Next Paint
- TTFB?— Time to First Byte
- MaxFID?— The maximum potential FID that a user could experience (based on the longest long task). We measure this as regular FID is subjective.
- DomInteractive
- Layout Shifts
- numTasksOver50ms?— How many tasks in the browser have exceeded 50 milliseconds, but are less than 100 milliseconds
- numTasksOver100ms?— How many long tasks in the browser have exceeded 100 milliseconds, but are less than 250 milliseconds
- numTasksOver250ms?— How many long tasks in the browser have exceeded 250 milliseconds, but are less than 500 milliseconds
- numTasksOver500ms?— How many long tasks in the browser have exceeded 500 milliseconds, but are less than 1000 milliseconds
- numTasksOver1000ms?— How many long tasks in the browser have exceeded 1000 milliseconds
The general idea was that the plugin would inject a small piece of JavaScript code into the browser (before page load). This code extends Google’s?web vitals library?to monitor some of the metrics listed above using the?PerformanceObserver API.
The frontend was built using standard CSS, HTML and JavaScript utilising Chrome’s API. The API provides access to a wide range of functionalities, from manipulating tabs and windows, to modifying the behaviour of web pages, to interacting with the user’s data. Understanding the Chrome API is a crucial aspect of creating a successful extension. Both the popup from the plugin and the main browser tab are in separate “worlds” (environments); so they need to communicate by sending messages to each other (similar to the?PubSub?pattern).
- Collaboration is key:?One of the most important takeaways from a hackathon is the importance of collaboration. Working with a team of diverse individuals with different backgrounds, skillsets, and perspectives can be incredibly rewarding. It requires open communication, mutual respect, and the ability to work towards a common goal. Successful hackathon teams are those that are able to work together effectively, share their expertise, and support each other throughout the process.
- Pitching and Communication:?Hackathons are also a great opportunity to develop your pitching and communication skills. Participants are often required to present their ideas and solutions to judges or potential investors. This requires clear and effective communication skills, as well as the ability to articulate your ideas in a concise and compelling way. By participating in a hackathon, you can learn how to pitch effectively, communicate your ideas clearly, and build confidence in your ability to present to others.
- Obviously, how to build a Chrome plugin!
- How to work effectively at speed:?Hackathons are all about rapid prototyping. We were expected to quickly develop a working prototype or solution that can be presented to judges or potential investors. This requires a fast and iterative development process that is focused on delivering results quickly. We divided the group into two to tackle separate concerns in parallel and cut down on development time.
- A useable plugin for engineers at Dunelm:?The plugin is freely available for engineers at Dunelm, and it easy to install. It can be used to test any changes on the live site but also during development.
- Increased awareness about site speed:?Just discussing this topic and presenting our solution gave site speed the attention it deserved, and made people think more about it.
- A good candidate for a tool that can be open-sourced
In conclusion, the hackathon was a great way to develop a wide range of skills and to learn from others in a collaborative and fast-paced environment. By participating in a hackathon, you can learn how to collaborate effectively, foster creativity and innovation, manage your time effectively, rapidly prototype, and develop your pitching and communication skills. Whether you are a seasoned hacker or a first-time participant, there is always something new to learn from a hackathon, and the skills you develop can be invaluable in your personal and professional life.
If you haven’t done so already, write a Chrome extension — you’ll learn a lot!
