This documentation explains how to build a basic Chrome Extension using Manifest V3.
The example creates a popup with a button. Clicking the button triggers an alert.
- Google Chrome (latest version)
- Basic understanding of HTML and JavaScript
- A code editor (VS Code recommended)
Create a new folder with the following files inside it:
chrome-extension/
├─ manifest.json
├─ popup.html
├─ popup.js
└─ icon.png
Create a file named manifest.json and add the following content:
{
"name": "My First Extension",
"description": "Test Chrome Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["activeTab"]
}Create a file named popup.html:
<!DOCTYPE html>
<html>
<body>
<h1>Extension Demo</h1>
<button id="btn">Click Me</button>
<script src="popup.js"></script>
</body>
</html>Create a file named popup.js:
document.getElementById("btn").addEventListener("click", () => {
alert("Button clicked from the Chrome Extension");
});Add an image named icon.png in the folder.
Recommended size: 128 × 128 px
- Open
chrome://extensions/in Chrome - Enable Developer mode
- Click Load unpacked
- Select your extension folder
If successful, an extension icon will appear next to the Chrome address bar. Clicking the icon opens the popup → clicking the button shows the alert.
| Problem | Likely Cause | Solution |
|---|---|---|
| “Manifest version 2 is deprecated” | Using old code | Use "manifest_version": 3 |
| Popup not showing | Incorrect path | Check "default_popup": "popup.html" |
| Button not working | Script not loaded | Ensure popup.js is linked inside popup.html |
| Icon not visible | Wrong filename | Ensure the file name is icon.png |
To extend the functionality, explore:
- Content scripts
service_workerfor background taskschrome.storagefor saving data- Fetch API for backend communication
commandsfor keyboard shortcuts
| Version | Changes |
|---|---|
| 1.0 | Initial documentation and working sample extension |
This example creates a right-click menu option that searches the meaning of any selected word.
word-meaning-extension/
├─ manifest.json
├─ context.js
└─ icon.png
Create a file named manifest.json:
{
"name": "Word Meaning Finder",
"description": "Search the meaning of any selected word using right-click menu.",
"version": "1.0",
"manifest_version": 3,
"permissions": ["contextMenus", "tabs"],
"background": {
"service_worker": "context.js"
},
"icons": { "128": "icon.png" }
}Create a file named context.js:
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "meaningSearch",
title: "Search meaning of '%s'",
contexts: ["selection"]
});
});
chrome.contextMenus.onClicked.addListener((info) => {
if (info.menuItemId === "meaningSearch" && info.selectionText) {
const query = encodeURIComponent(info.selectionText.trim());
const url = `https://www.google.com/search?q=${query}+meaning`;
chrome.tabs.create({ url });
}
});Add a 128 × 128 px image named icon.png.
- Install the extension using Load Unpacked
- Open any webpage
- Select a word
- Right-click → “Search meaning of 'selected word'”
- A new tab opens with meaning results
| Problem | Cause | Fix |
|---|---|---|
| Right-click option doesn't appear | Service worker not loaded | Reload the extension |
| New tab doesn’t open | Missing permission | Ensure "tabs" permission exists |
| Clicking does nothing | Wrong menuItemId | Make sure "meaningSearch" matches in both creation and click listener |
This extension opens the meaning using a Google search.
To use a specific dictionary website, update the URL inside context.js.