-
-
this is some web features
-
in this slide we can see it working ,it shows the feature is newly, wildly available
-
it is the ui of this project
-
this is full web page ui and how user can see in their devices
-
this has same the output of this project.
Inspiration
When I first came across the idea of Baseline and web features, I realized how often developers struggle to know which modern CSS, JavaScript, or HTML features are safe to use across browsers. I wanted to make something practical that could help developers quickly check compatibility while coding or browsing. That’s where the idea of a Baseline Web Features Checker started.
What it does
The extension scans a webpage and detects modern web features being used, like CSS Grid, Flexbox, ES modules, or new HTML elements. It then compares these features against the Baseline support data and shows whether they are widely supported or risky. Developers can also highlight feature usage directly on the page for better visualization.
How we built it
Initially, I thought about building an ESLint plugin, but soon realized a browser extension would be more impactful and easier for developers to use in real time. I learned how Chrome extensions work, set up React for the frontend, and wrote content/background scripts for feature detection. With some trial, error, and research, I was able to integrate feature scanning, communication, and a clean UI.
Challenges we ran into
The first big challenge was simply understanding how Chrome extensions work, since I had never built one before. Figuring out message passing between content scripts and the popup UI took time. Another challenge was parsing CSS, JS, and HTML effectively without breaking on cross-origin files. Debugging and handling constant errors was also part of the process.
Accomplishments that we're proud of
I’m proud that I went from knowing almost nothing about extensions to actually building a working tool. The biggest accomplishment is creating something that not only detects features but also helps visualize them directly on the page.
What we learned
I learned how extensions are structured, how content scripts interact with pages, and how to organize React inside an extension. More importantly, I learned that research and persistence are key when working on new technologies.
What's next for Baseline web features checker
Next, I plan to add more framework and linter integrations, export reports for developers, and maybe even an online dashboard. The long-term goal is to make this a go-to tool for developers to confidently use modern web features without worrying about compatibility.
Log in or sign up for Devpost to join the conversation.