Baseline Checker Extension

“Baseline Checker – Instantly verify if a website meets modern web standards.”

Comment

Inspiration

The idea came from the Chrome Baseline initiative, which highlights a common set of web platform features that all modern browsers support.
As a developer, I realized that checking these features manually on different websites can be tedious.
This inspired me to build a lightweight Chrome extension that instantly reports whether a webpage meets some essential baseline features such as HTTPS, UTF-8 encoding, and localStorage availability.

What it does

The Baseline Checker Extension quickly scans the website you are visiting and reports whether it supports a few essential baseline web platform features.

Specifically, it checks:

  • ✅ If the site uses HTTPS (secure connection).
  • ✅ If the site declares UTF-8 encoding (universal character set).
  • ✅ If the site supports localStorage (persistent browser storage).

The results are displayed in a popup interface with green checkmarks (✅) for supported features and red crosses (❌) for missing ones.
If the site is restricted or doesn’t allow scanning (e.g., Chrome internal pages ) , the extension shows a warning instead.

How we built it

We built the Baseline Checker Extension using Chrome Extension Manifest V3, focusing on simplicity and beginner-friendly development.

  • The popup interface was created with HTML, CSS, and JavaScript for a clean user experience.
  • A content script (content.js) runs on websites to detect baseline features like HTTPS, UTF-8, and localStorage.
  • The popup.js file collects the results from the content script and displays them with clear ✅ / ❌ indicators.
  • background.js ensures smooth communication between popup and content scripts.
  • All project files were uploaded to GitHub using the beginner-friendly “Upload files” option instead of Git CLI, to keep the process simple.

We didn’t rely on heavy tools like linters, transpilers, or build systems — the extension was built entirely with vanilla JavaScript, HTML, and CSS, which keeps it lightweight and easy to understand.

Challenges we ran into

  • Understanding how Manifest V3 works compared to older extension formats.
  • Figuring out how to properly connect popup.js, content.js, and background.js for smooth communication.
  • Running into restricted or special URLs (like chrome:// pages or example.com) that cannot be scanned by extensions.
  • Handling websites with partial support for baseline features, which made it tricky to decide how to present results.
  • Uploading the project to GitHub using the beginner-friendly method instead of Git CLI, while keeping the structure clean and contest-ready. ## Accomplishments that we're proud of Successfully built a working Chrome extension from scratch using Manifest V3.
  • Integrated multiple baseline feature checks (HTTPS, UTF-8, localStorage) into one simple tool.
  • Designed a clear popup UI with ✔️ green / ❌ red indicators for instant feedback.
  • Overcame technical barriers like restricted URLs and still made the extension reliable.
  • Packaged the project neatly with screenshots, documentation, and MIT license to be contest-ready. ## What we learned Gained hands-on experience with Chrome Extensions (Manifest V3) and how background, popup, and content scripts interact.
  • Learned how to check and validate baseline web features programmatically.
  • Discovered the importance of developer tools that make hidden technical details visible in a simple way.
  • Improved understanding of GitHub project publishing (README, license, screenshots).
  • Realized the value of writing clean, well-documented code for clarity and maintainability. ## What's next for Baseline Checker Extension Add support for more baseline features (e.g., Service Workers, ES6+ JavaScript support, responsive meta tags).
  • Provide a detailed report view with explanations of why each feature matters.
  • Export results as a shareable JSON or PDF report for developers.
  • Build a dark mode UI for better accessibility and user preference.
  • Release the extension on the Chrome Web Store so more developers can benefit.

Built With

  • apis
  • chrome
  • cloud
  • css
  • databases
  • extension
  • frameworks
  • google
  • html
  • javascript
  • javascript-**frameworks**:-none-(kept-lightweight-with-vanilla-js)-**platforms**:-google-chrome-(manifest-v3-extensions-api)-**databases**:-none-(only-uses-browser-localstorage-for-baseline-test)-**apis**:-chrome-extensions-api-(messaging
  • languages
  • none
  • platforms
  • popup
  • services
Share this project:

Updates