Build Your Chrome Web Analytics Extension with JavaScript and Manifest V3
# 🕵️ Build a Chrome Extension to Analyze Web Pages
Have you ever visited a website and wondered how well the page is structured?
Does it have a **meta description**? How many **links** or **headings** does it use?
Usually, you’d open **DevTools** or an SEO audit tool to find answers. But what if you could check instantly — without leaving your browser?
In this tutorial, you’ll learn how to build a **Chrome extension** that scans any webpage for:
- Titles
- Meta descriptions
- Headings
- Links
---
## 🎯 What You’ll Learn
By the end of this article, you will:
- **Understand** how Manifest V3 works
- **Inject** content scripts into web pages
- **Build** a popup UI to show structured data
- **Explore** extending the extension with **AI-powered insights**
💡 **Note:** This guide is **framework-free**—just HTML, CSS, and vanilla JavaScript.
---
## 📋 Table of Contents
1. [Prerequisites](#prerequisites)
2. [Step 1: How Chrome Extensions Work](#step-1-how-chrome-extensions-work)
3. [Step 2: Set Up Project Structure](#step-2-set-up-project-structure)
4. [Step 3: Define the Manifest File](#step-3-define-the-manifest-file)
5. [Step 4: Create the Popup UI](#step-4-create-the-popup-ui)
6. [Step 5: Write the Content Script](#step-5-write-the-content-script)
7. [Step 6: Connect Popup & Content Script](#step-6-connect-popup--content-script)
8. [Step 7: Load & Test Your Extension](#step-7-load--test-your-extension)
9. [Step 8: Optional Enhancements](#step-8-optional-enhancements)
10. [Step 9: Publish to the Chrome Web Store](#step-9-publish-to-the-chrome-web-store)
11. [Final Thoughts](#final-thoughts)
---
## 📦 Prerequisites
Before starting, make sure you have:
- Basic **HTML**, **CSS**, **JavaScript** knowledge
- Latest **Google Chrome** installed
- Familiarity with **Chrome DevTools** *(optional but helpful)*
- A code editor (e.g., **VS Code**, **Sublime Text**)
- A local project folder
---
## Step 1: How Chrome Extensions Work
A Chrome extension is a set of web tech—**HTML**, **CSS**, **JavaScript**—that extends browser features.
**Core components:**
- **manifest.json** — Metadata: permissions, icons, scripts
- **Content scripts** — Injected into pages, can access the DOM
- **Background scripts** — Handle persistent or event-driven logic
- **Popup UI** — Small HTML UI shown when clicking the extension icon
**Our data flow:**[Popup UI] ⇄ [Content Script] ⇄ [Web Page DOM]
Clicking “Analyze” in the popup sends a message to the content script →
Script reads DOM →
Returns structured page info.
---
## Step 2: Set Up Project Structure
Create a folder `page-analyzer-extension` with:
page-analyzer-extension/
│
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── styles.css
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
💡 **Tip:** Use [favicon.io](https://favicon.io/) to create icons.
---
## Step 3: Define the Manifest File
`manifest.json`:
{
"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"]
}
]
}
**Key points:**
- `manifest_version` = 3 (latest, more secure)
- `permissions`: access active tab & run injected scripts
- `content_scripts`: which JS runs automatically
---
## Step 4: Create the Popup UI
`popup.html`:
Page Analyzer
Page Analyzer
Click below to analyze the current page:
Analyze Page
`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.js`:
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());
}
});
---
## Step 6: Connect Popup & Content Script
`popup.js`:
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}
`;
});
});
---
## Step 7: Load & Test Your Extension
1. Go to `chrome://extensions/`
2. Enable **Developer Mode**
3. Click **Load Unpacked**
4. Select your project folder
Then:
- Open any website
- Click the extension icon → **Analyze Page**
- See the **title**, **description**, **headings**, **link count**, **domain**
🎉 **You’ve just built a working page analyzer!**
---
## Step 8: Optional Enhancements
Suggestions:
- **AI Insights** — Call an API (OpenAI, Gemini, etc.) to summarize content or check SEO.
- **Detect Missing Tags** — e.g., `og:title`, `description`.
- **Export / Screenshot** — Generate PDFs, logs, or capture visible tab.
Example: Check missing tagsconst missingTags = [];
if (!document.querySelector('meta[name="description"]')) missingTags.push("description");
if (!document.querySelector('meta[property="og:title"]')) missingTags.push("og:title");
---
## Step 9: Publish to the Chrome Web Store
- Go to [Chrome Web Store Developer Console](https://chrome.google.com/webstore/devconsole)
- Pay **$5** one-time registration
- Upload your ZIP and submit for review (include icons & description)
---
## Final Thoughts
You now know:
- How extensions communicate across scripts
- How to scrape DOM safely
- How to present data in a popup
- How to extend with AI features
**Next steps:** Automate, improve, or add cross-platform publishing. Tools like [AiToEarn官网](https://aitoearn.ai/) can integrate AI-powered content insight and allow distribution to multiple channels—helpful if you turn your analyzer into an SEO assistant.
