WebLens — Web Performance Analyzer

, ,

WebLens is a lightweight browser extension that analyzes real-world web page performance directly in your browser using native Web Performance APIs. It collects metrics such as page load time, DOMContentLoaded time, DOM element count, resource request count, and a best-effort LCP value.

This tool measures real user experience and does not emulate devices like Lighthouse. That means, this tool is a Real User Monitoring (RUM) tool

Features

• Core Web Vitals: Measures Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT).
• Page Load Metrics: Analyzes page load time and DOMContentLoaded time.
• Resource Analysis:
  • Counts the total number of DOM elements and resource requests.
  • Breaks down resource sizes by type (JavaScript, CSS, Images, Fonts, Other).
  • Identifies large resources exceeding size thresholds.
  • Lists the top 5 slowest resources to load.
• Network Information: Provides an estimation of the network conditions, including effective type, downlink, RTT, and whether data saving is enabled.
• User Interface:
  • Displays metrics in a clear and organized popup.
  • Uses circular progress bars for Core Web Vitals and page load metrics.
  • Includes a theme switcher for light and dark modes.
• Compatibility: Avoids injecting scripts into browser-internal or file URLs.

Why WebLens?

• Uses real browser APIs, not simulations
• Lightweight alternative for quick insights
• Ideal for developers, students, and QA testers

Architecture

The WebLens extension follows a standard browser extension architecture. The diagram below illustrates the main components and their interactions:

flowchart TD

    subgraph Browser
        User[Browser User] --> ToolbarIcon[Toolbar Icon]
    end

    subgraph Extension
        ToolbarIcon --> PopupUI[Extension Popup]
        PopupUI --> ContentScript[Content Script]
        ContentScript --> PopupUI
        BackgroundScript[Background Script]
    end

    subgraph WebPage
        PageDOM[Web Page DOM]
    end

    ContentScript --> PageDOM
    PageDOM --> ContentScript

Loading

• Extension Popup: The primary user interface (popup.html, popup.js). It sends analysis requests and displays the final metrics.
• Content Script (content.js): Injected into the active web page. It collects performance data from the page's DOM and performance APIs.
• Background Script (background.js): An optional script that handles extension lifecycle events (e.g., installation, updates). It is not critical for the core analysis logic in this extension.

Tech Stack

• Chrome Extension (Manifest V3)
• JavaScript (ES6)
• Web Performance API
• PerformanceObserver API
• Network Information API
• Tailwind CSS (UI styling)

Demo

Below is a demo screenshots of the extension popup in action:

,,

Below is a demo video of the extension popup in action:

Files

• manifest.json — extension manifest
• background.js — (optional) background script used at install/startup
• content.js — content script that runs in web pages and returns metrics on request
• popup.html, popup.js, popup.css — popup UI and logic
• package.json — project metadata (if used for tooling)

Run WebLens as an Unpacked Chrome Extension

Follow these steps to run WebLens locally in Chrome:

Clone or Download the Project

https://github.com/RukshanRanasinghe2000/web-lens.git Or download the ZIP and extract it.

Open Chrome Extensions Page

Open Google Chrome and navigate to:

chrome://extensions

Enable Developer Mode

In the top-right corner, toggle Developer mode → ON

Load the Extension

1. Click Load unpacked
2. Select the project root folder (web-lens/)
3. Chrome will load the extension immediately

Verify Installation

• You should see WebLens listed in extensions
• The extension icon will appear in the Chrome toolbar
• Pin it for easy access

Use the Extension

1. Open any website (e.g., https://example.com)
2. Click the WebLens icon
3. Click Analyze
4. View real-time performance metrics

Reload After Changes

When you modify code:

1. Go to chrome://extensions
2. Click Reload on WebLens
3. Refresh the target webpage

Notes

• Do not include node_modules when loading
• Works best on HTTPS pages
• Some metrics depend on page load timing and network conditions

Chrome Web Store

Publishing soon 🚀 This extension complies with Chrome Web Store policies:

• Minimal permissions
• Clear privacy policy
• No external tracking

Development

• Edit source files in the project folder. Common files to change:

  • content.js — modify what metrics are collected
  • popup.js / popup.html — change UI or behavior
  • manifest.json — add permissions or script declarations
  • src/input.css — main Tailwind CSS input file
  • tailwind.config.cjs — Tailwind CSS configuration

• Tailwind CSS Compilation:

  • To watch for changes and compile CSS during development: npm run watch:css
  • To build production-ready CSS: npm run build:css

• Reload the extension from the extensions page after making changes.

• Use the popup's DevTools (right-click the popup → Inspect) to see console logs for debugging.

Troubleshooting

• "Cannot access a chrome:// URL" or similar errors:

  • These occur when attempting to inject scripts into browser-internal pages. Open a normal web page and try again.

• Unchecked runtime.lastError messages:

  • Check the popup DevTools console. The code already surfaces friendly messages in the popup when injection or messaging fails.

• Cannot read properties of null (reading 'addEventListener') in content script:

  • This happens if code in content.js tries to access popup-only elements. Content scripts should only interact with the page DOM and receive messages from the extension (the project version includes a message listener in content.js).

Permissions

Check manifest.json for the exact permissions the extension requests. Typical ones for this extension include permissions like:

• scripting
• tabs
• (optional) host permissions for pages where you want to run the content script

Privacy Policy

WebLens does not collect, store, or transmit any user data. All performance analysis is performed locally within the user's browser.

License

This project is licensed under the MIT License.