How To Create a Chrome Extension in 30 Minutes: A Beginner’s Step By Step Guide
How To Create a Chrome Extension in 30 Minutes: A Beginner’s Step By Step Guide
Build a Simple Ad-Blocker Step-by-Step
Chrome extensions are powerful tools that enhance your browsing experience—from blocking ads to automating tasks. But have you ever wondered how they work? In this guide, you’ll build a simple ad-blocking Chrome extension from scratch in 30 minutes, even if you’ve never coded an extension before. No prior experience required!
By the end, you’ll understand:
- The anatomy of a Chrome extension (manifest, scripts, and assets).
- How to intercept and hide webpage elements like ads.
- How to test and debug your extension in Chrome.
Let’s dive in!
Tools You’ll Need
- Google Chrome: Download here.
- A text editor (VS Code, Sublime Text, or Notepad++) but i would be using Vscode so choose whatever code editor you prefer.
- You must have a basic knowledge of HTML, CSS, and JavaScript since thats what we would be working with.
Step 1: Set Up Your Project
Create a folder named ad-blocker with the following files:
ad-blocker/
├── manifest.json
├── content.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
manifest.json: The extension’s configuration file.content.js: The script that interacts with webpages.icons/: Add placeholder icons (or use these samples).
Step 2: Configure the Manifest
Open manifest.json and paste this code:
{
"manifest_version": 3,
"name": "Simple Ad-Blocker",
"version": "1.0",
"description": "Hides ads from webpages.",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"permissions": ["activeTab"]
}
Key Details:
manifest_version: Always use 3 (Chrome’s latest standard).content_scripts: Instructs Chrome to injectcontent.jsinto all URLs.run_at: Ensures the script runs after the page loads.
Step 3: Write the Content Script
Open content.js and add this code to hide ad elements:
// Target common ad-related classes and IDs
const adSelectors = [
'.ad', '.ads', '.ad-banner',
'#ad', '#ad-container',
'div[data-ad]', 'iframe[src*="ads"]'
];
function hideAds() {
adSelectors.forEach(selector => {
document.querySelectorAll(selector).forEach(element => {
element.style.display = 'none';
});
});
}
// Run when the page finishes loading
window.addEventListener('load', hideAds);
// Optional: Watch for dynamic ads added after load
const observer = new MutationObserver(hideAds);
observer.observe(document.body, {
childList: true,
subtree: true
});
How It Works:
adSelectors: A list of CSS selectors targeting common ad containers.hideAds(): Hides elements matching the selectors by settingdisplay: none.- MutationObserver: Watches for new elements (e.g., dynamically loaded ads) and reapplies
hideAds().
Step 4: Add Icon Placeholders
For testing, create simple 16x16, 48x48, and 128x128 pixel PNGs in the icons folder. Name them icon16.png, icon48.png, and icon128.png.
Step 5: Load the Extension in Chrome
- Open Chrome and navigate to
chrome://extensions/. - Enable Developer Mode (toggle in the top-right corner).
- Click Load unpacked and select your
ad-blockerfolder.
Your extension will appear in the Chrome toolbar with the placeholder icon.
Step 6: Test Your Ad-Blocker
- Visit a test page with ads (e.g., this sample page).
- Alternatively, create a local HTML file:
```html
<!DOCTYPE html>
3. Open the page. The ad elements should be hidden!
---
## How It Works Under the Hood
- **Content Scripts**: Run in the context of webpages, allowing DOM manipulation.
- **Manifest V3**: Prioritizes security and performance over V2.
- **MutationObserver**: Monitors DOM changes to handle dynamic content (e.g., ads loaded via AJAX).
---
## Troubleshooting
**Issue**: Ads aren’t being hidden.
- **Fix**:
- Ensure the `content_scripts` matches include the tested URL.
- Check for typos in `content.js` (use Chrome’s DevTools Console: `Ctrl+Shift+J`).
**Issue**: Extension doesn’t load.
- **Fix**:
- Validate JSON syntax in `manifest.json` (use [JSONLint](https://jsonlint.com/)).
- Reload the extension on `chrome://extensions/`.
---
## Enhance Your Extension (Optional)
### 1. Block Ads via Network Requests
Upgrade to request blocking using Manifest V3’s `declarativeNetRequest` API:
1. Update `manifest.json`:
```json
{
...
"permissions": ["declarativeNetRequest"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
}
}
- Create
background.js:chrome.declarativeNetRequest.updateDynamicRules({ addRules: [{ "id": 1, "priority": 1, "action": { "type": "block" }, "condition": { "urlFilter": '||ads.example.com^', "resourceTypes": ['script', 'image'] } }] });
2. Add a Popup Interface
Let users customize blocked selectors:
- Add
popup.htmlandpopup.js. - Update
manifest.json:{ ... "action": { "default_popup": "popup.html" } }
Conclusion
Congratulations! You’ve built a functional Chrome extension in under 30 minutes. While this ad-blocker is basic, it demonstrates the core concepts of Chrome extension development:
- Manifest Configuration: The backbone of your extension.
- Content Scripts: Interact with webpage content.
- Testing/Debugging: Use Chrome’s built-in tools.
Next Steps:
- Explore Chrome’s Extension API.
- Publish your extension to the Chrome Web Store.
Resources:
Total Time Spent: 30 minutes
Now go forth and build—your browser awaits customization! 🚀
Leave a comment