Have you ever visited a website and wondered how good the page structure is? Does it have a meta description? How many links or topics does it use?
Typically, you open Detools or an SEO auditing tool to find the answers to these questions. But what if you could instantly analyze any web page, without ever leaving your browser?
In this tutorial, you will learn how to create a Chrome extension that scans and analyzes any web page for titles, meta descriptions, titles, and links.
By the end of this article, you will:
Understand how v3 works in Chrome Extensions
Learn how to inject content scripts into web pages
Create a popup UI that fetches and displays structured data
Discover how that same foundation can be enhanced with AI-powered insights
💡 This guide is focused on learning and teaching – no frameworks or building tools required. Just HTML, CSS, and vanilla JavaScript.
Table of Contents
🧰 Prerequisites
Before starting this tutorial, make sure you have:
Basic understanding of HTML, CSS, and JavaScript
You have the latest version of Google Chrome installed on your system
Familiarity with using Chrome DevTools (optional but helpful)
A code editor such as VS Code or Excel Text
A local folder where you can create and organize your extension files
💡 Again, no framework or build tools required. We will only use vanilla JavaScript and simple web technologies in this guide.
🧩 Step 1: Understanding How Chrome Extensions Work
A Chrome extension is simply a bundle of web technologies — HTML, CSS, and JS — that extend the browser’s functionality.
An extension can have multiple parts:
Manifest file For centuries.
manifest.json): Defines permissions, icons, and textures.Content scripts: run inside web pages and access the DOM.
Background script: Handle long-running or event-driven logic.
Popup UI: What users see when they click your extension’s icon.
Here’s a high-level flow of what we’ll be building:
(Popup UI) <—> (Content Script) <—> (Web Page DOM)
When the user clicks “Analyze”, the popup will send a message to the content script. The script will then read the DOM and return results such as the page title, description, titles and links.
🧠 Step 2: Set up the project structure
Create a new folder called page-analyzer-extension. Inside it, create these files:
page-analyzer-extension/
│
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── styles.css
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
Icons are optional, but they make the extension look professional. You can use placeholders or generate them favicon.io.
⚙ Step 3: Define the manifest file
create manifest.json And paste it in:
{
"manifest_version": 3,
"name": "Page Analyzer",
"version": "1.0",
"description": "Analyze any web page for its title, description, headings, and links.",
"permissions": ("activeTab", "scripting"),
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": (
{
"matches": ("" ),
"js": ("content.js")
}
)
}
Let’s break it down:
manifest_version: 3: Latest version with security and performance improvementspermissions: Allow the extension to access the active tab and run scriptscontent_scripts: Specify which JS files should be automatically run in web pages
A popup appears when users click on the extension icon.
popup.html:
html>
<html>
<head>
<title>Page Analyzertitle>
<link rel="stylesheet" href="styles.css" />
head>
<body>
<h2>Page Analyzerh2>
<p>Click below to analyze the current page:p>
<button id="analyze">Analyze Pagebutton>
<div id="results">div>
<script src="popup.js">script>
body>
html>
styles.css:
body {
font-family: system-ui, sans-serif;
padding: 12px;
width: 280px;
}
button {
background: #2563eb;
color: white;
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
}
#results {
margin-top: 12px;
font-size: 13px;
line-height: 1.4;
word-wrap: break-word;
}
🧠 Step 5: Write the content script (content.jsJeez
This script will analyze the web page.
function analyzePage() {
const title = document.title || "No title found";
const description =
document.querySelector('meta(name="description")')?.content || "No description found";
const headings = Array.from(document.querySelectorAll("h1, h2, h3")).map((h) =>
h.innerText.trim()
);
const links = document.querySelectorAll("a").length;
return {
title,
description,
headings,
linkCount: links,
domain: location.hostname,
};
}
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "analyze") {
sendResponse(analyzePage());
}
});
Here’s what’s going on:
We extract title, description, topics and total link count
We return this data as a structured object
The script listens for pop-up messages and responds with parsing
⚡ Step 6: Integrate the popup and content script
i popup.jsadd the logic that triggers the page analysis.
document.getElementById("analyze").addEventListener("click", async () => {
const (tab) = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.tabs.sendMessage(tab.id, { action: "analyze" }, (response) => {
const resultContainer = document.getElementById("results");
if (!response) {
resultContainer.innerText = "Unable to analyze this page.";
return;
}
const { title, description, headings, linkCount, domain } = response;
resultContainer.innerHTML = `
Domain: ${domain}
Title: ${title}
Description: ${description}
Headings: ${
headings.length ? headings.join(", ") : "No headings found"
}
Links: ${linkCount}
`;
});
});
It uses Chrome Tabs API To find the current tab and send a message to the content script. When the script responds, we update the popup with the results.
🧪 Step 7: Load and test your extension
Open chrome://extensions/
Enable developer mode
Click on Load Unpacked
Select your project folder
Now, place your extension in the toolbar, open any website, and click “Analyze Page”.
You will immediately see:
🎉 Congratulations! You have created a working web page analyzer.
🧩 Step 8: Add optional enhancements
Now that the basics are out of the way, here are some ways to level up your plan.
🧠 1. Add AI insights
You can connect to an AI API (like Openai or Gemini) to summarize the page or evaluate the SEO structure.
const aiResponse = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: { Authorization: `Bearer ${API_KEY}` },
body: JSON.stringify({
model: "gpt-4o-mini",
messages: (
{ role: "system", content: "You are an SEO assistant." },
{ role: "user", content: `Analyze the following page info: ${JSON.stringify(pageData)}` }
)
})
});
For example, after building this basic parser, I expanded it into a full-featured one Ranking Factor AI SEO extension Which connects to the same premise:
AI-generated keyword suggestions
Metadata Improvement Recommendations
Automatic screenshot capture
Page freshness detection
It shows how a simple developer project can evolve into a powerful, production-ready tool.
🔍 2. Detect Missing SEO Tags
You can check for missing tags like this:
const missingTags = ();
if (!document.querySelector('meta(name="description")')) missingTags.push("description");
if (!document.querySelector('meta(property="og:title")')) missingTags.push("og:title");
🖼 3. Add screenshot or export report
use chrome.tabs.captureVisibleTab() To take an API screenshot, or generate a downloadable HTML/JSON report.
🧭 Step 9: Publish to the Chrome Web Store
Once you’ve tested your extension, visit chrome.google.com/webstore/devconsole. You’ll need to pay a one-time $5 developer registration fee, then you can upload your extension as a zip file. Make sure you write a clear, helpful description before submitting your extension for review.
Final thoughts
In this tutorial, you learned:
How Chrome Extensions Communicate Between Scripts and Web Pages
How to safely extract DOM data
How to display structured information in popup UI
How to enhance browser tools with AI for smarter analysis
Browser extensions are an incredible way to bring web automation, analytics and creativity directly into your workflow. Whether you’re analyzing pages, improving accessibility, or experimenting with AI, you now have the foundation for whatever concept you envision.