Build a Notification Blocker Chrome Extension: Stop Annoying Website Popups
Website notification requests have become one of the most frustrating aspects of browsing the internet in 2025. Every day, millions of users are bombarded with intrusive popups asking for permission to send notifications, disrupting their browsing experience and wasting valuable time. If you have ever tried to read an article only to be greeted by a notification permission request that seems impossible to dismiss, you understand exactly why building a chrome extension notification blocker has become such a valuable project. This comprehensive tutorial will guide you through creating your own notification blocker extension that prevents websites from asking for notification permissions, blocks existing notification popups, and gives you complete control over your browsing experience.
The demand for effective notification blocking solutions has never been higher. Website developers have increasingly adopted notification prompts as a marketing tool, attempting to re-engage users through push notifications even after they have left the original website. While notifications can be useful when intentionally subscribed to legitimate services, the overwhelming majority of notification requests are nothing more than annoying interruptions designed to boost engagement metrics at the expense of user experience. Building your own chrome popup blocker extension not only solves this problem for your personal browsing but also provides an excellent learning opportunity to understand how Chrome extensions work under the hood.
In this tutorial, we will cover everything you need to know to build a fully functional notification blocker extension from scratch. We will start by exploring the structure of Chrome extensions and the manifest file that defines how your extension operates. Then we will dive into the actual implementation, creating content scripts that detect and block notification permission requests, popup dialogs that appear on pages, and the JavaScript logic that makes everything work together seamlessly. By the end of this guide, you will have a complete, working extension that you can use and customize to meet your specific needs.
Understanding Chrome Extension Architecture
Before we begin building our notification blocker, it is essential to understand how Chrome extensions are structured. Chrome extensions are essentially small web applications that run within the Chrome browser and can interact with web pages you visit. They consist of several components that work together to provide additional functionality beyond what the browser offers by default. Understanding these components will help you build a more effective and maintainable extension.
At the core of every Chrome extension is the manifest.json file. This configuration file tells Chrome important details about your extension, including its name, version, permissions it requires, and which files contain the actual logic. The manifest file uses Manifest V3, the current version of Chrome’s extension system, which provides improved security and performance compared to older versions. When you load an extension into Chrome for testing, the browser reads the manifest to understand what the extension can do and how it should be loaded.
Chrome extensions can include several types of files, each serving a specific purpose. Background scripts run in the background and handle events that occur across multiple pages, such as browser toolbar clicks or installation events. Content scripts are JavaScript files that run in the context of web pages you visit, allowing you to modify page content and interact with the DOM. Popup HTML and JavaScript files create the interface that appears when you click the extension icon in your browser toolbar. Service workers replace the old background pages in Manifest V3, providing event-driven functionality without consuming resources when not needed.
For our notification blocker, we will primarily work with content scripts because we need to interact directly with web pages to detect and block notification prompts. We will also create a popup interface that allows users to toggle the extension on and off, configure which types of notifications to block, and view statistics about blocked requests. This combination of content scripts for functionality and a popup for user control provides a complete and user-friendly experience.
Setting Up Your Development Environment
Before writing any code, you need to set up your development environment properly. This involves creating the necessary project structure and configuring your development tools to work with Chrome extensions. The setup process is straightforward but requires attention to detail to ensure everything works correctly.
Start by creating a new folder on your computer to hold your extension files. Name it something descriptive like “notification-blocker-extension” so you can easily identify it later. Inside this folder, you will create several subfolders and files that make up your extension. The typical structure includes a folder for your manifest file at the root level, a folder for your popup files, a folder for content scripts, and optionally folders for icons and other assets. Keeping a clean, organized structure makes it easier to maintain and update your extension over time.
You will also need to enable Developer Mode in Chrome to load your extension for testing. To do this, open Chrome and navigate to chrome://extensions/ in your address bar. Look for a toggle switch labeled “Developer mode” in the top right corner and turn it on. This enables additional options in the extensions page that allow you to load unpacked extensions, which is what you will do to test your notification blocker during development. Once Developer Mode is enabled, you can click the “Load unpacked” button to select your extension folder and see your extension appear in the list of installed extensions.
It is also helpful to have a good code editor installed. Visual Studio Code is an excellent choice for extension development because it includes features like syntax highlighting for JavaScript and JSON, built-in terminal support, and extensions specifically designed for Chrome development. However, you can use any text editor you prefer. The most important thing is to ensure your files are saved with the correct encoding and file extensions.
Creating the Manifest File
The manifest.json file is the foundation of your Chrome extension, and creating it correctly is crucial for your extension to function properly. This file defines the extension’s metadata, specifies which permissions it needs, and tells Chrome which files to load and how to use them. Let us create a comprehensive manifest for our notification blocker extension.
{
"manifest_version": 3,
"name": "Notification Blocker",
"version": "1.0",
"description": "Block annoying website notification popups and prevent notification permission requests",
"permissions": [
"storage",
"activeTab"
],
"host_permissions": [
"<all_urls>"
],
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-scripts/notification-blocker.js"],
"run_at": "document_start"
}
],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
This manifest file includes several important components that your extension needs. The manifest_version field specifies that we are using Manifest V3, which is required for all new extensions and provides modern features and better security. The name and version fields identify your extension, while the description provides information shown in the Chrome Web Store and extension management page.
The permissions array specifies what capabilities your extension needs. We include “storage” to save user preferences and “activeTab” to interact with the currently active tab. The host_permissions array with “
Building the Content Script
The content script is the heart of your notification blocker. This JavaScript file runs in the context of each web page you visit and is responsible for detecting notification permission requests, blocking notification dialogs, and preventing websites from showing push notifications. Writing an effective content script requires understanding how websites implement notification requests and using the appropriate techniques to intercept and block them.
Modern websites use several methods to request notification permissions. The most common is the Notification.requestPermission() JavaScript API, which triggers the browser’s native permission dialog. Websites can call this function in response to various user actions, such as clicking a button, scrolling to a certain point, or simply loading the page. Some websites also use service workers to display push notifications, which requires a different blocking approach. Additionally, many sites create custom modal dialogs that mimic browser notifications or ask for permission in more subtle ways.
Our content script will implement a multi-layered defense strategy to block all these notification request methods. The first layer involves overriding the Notification API to prevent websites from calling requestPermission. The second layer uses MutationObserver to detect and remove custom notification dialogs that websites create. The third layer blocks service worker registration when it is used for push notifications. Let us implement each of these layers in our content script.
// content-scripts/notification-blocker.js
(function() {
'use strict';
// Configuration stored in extension storage
let settings = {
blockPermissionRequests: true,
blockPushNotifications: true,
blockCustomModals: true,
whitelist: []
};
// Load settings from storage
function loadSettings() {
return new Promise((resolve) => {
chrome.storage.sync.get(['settings'], (result) => {
if (result.settings) {
settings = { ...settings, ...result.settings };
}
resolve();
});
});
}
// Check if current domain is whitelisted
function isWhitelisted() {
const currentDomain = window.location.hostname;
return settings.whitelist.includes(currentDomain);
}
// Layer 1: Override Notification API
function overrideNotificationAPI() {
const originalRequestPermission = Notification.requestPermission;
const originalPermission = Object.getOwnPropertyDescriptor(Notification, 'permission');
Notification.requestPermission = async function() {
if (settings.blockPermissionRequests && !isWhitelisted()) {
console.log('[Notification Blocker] Blocked permission request on', window.location.hostname);
return 'denied';
}
return originalRequestPermission.apply(this, arguments);
};
// Override the permission property to always return denied
Object.defineProperty(Notification, 'permission', {
get: function() {
if (settings.blockPermissionRequests && !isWhitelisted()) {
return 'denied';
}
return 'default';
},
configurable: true
});
}
// Layer 2: Block service worker registration for push notifications
function blockServiceWorkerPush() {
const originalRegister = ServiceWorkerContainer.prototype.register;
ServiceWorkerContainer.prototype.register = async function(scriptURL, options) {
if (settings.blockPushNotifications && !isWhitelisted() &&
options && options.type === 'push') {
console.log('[Notification Blocker] Blocked service worker push registration on', window.location.hostname);
throw new Error('Push notifications are blocked');
}
return originalRegister.apply(this, arguments);
};
}
// Layer 3: Remove custom notification modals using MutationObserver
function setupModalObserver() {
const blockedSelectors = [
'[class*="notification"]',
'[class*="popup"]',
'[class*="modal"]',
'[id*="notification"]',
'[id*="subscribe"]',
'[class*="allow-notifications"]',
'[data-notification]',
'.push-notification',
'.notification-modal',
'.subscribe-modal'
];
const observer = new MutationObserver((mutations) => {
if (!settings.blockCustomModals || isWhitelisted()) return;
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return;
// Check if the added element matches our blocked selectors
blockedSelectors.forEach(selector => {
try {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
// Check if element is likely a notification modal
if (isNotificationModal(el)) {
el.remove();
console.log('[Notification Blocker] Removed notification modal');
}
});
} catch (e) {
// Ignore invalid selectors
}
});
});
});
});
observer.observe(document.body || document.documentElement, {
childList: true,
subtree: true
});
}
// Helper function to identify notification modals
function isNotificationModal(element) {
const text = element.textContent.toLowerCase();
const notificationKeywords = [
'enable notifications',
'allow notifications',
'turn on notifications',
'subscribe to notifications',
'push notifications',
'get notifications',
'stay updated',
'notification permissions'
];
return notificationKeywords.some(keyword => text.includes(keyword));
}
// Layer 4: Intercept Permission API (newer API)
function interceptPermissionsAPI() {
if (window.Permissions && window.Permissions.query) {
const originalQuery = window.Permissions.query.bind(window.Permissions);
window.Permissions.query = async function(parameters) {
if (parameters && parameters.name === 'notifications' &&
settings.blockPermissionRequests && !isWhitelisted()) {
return { state: 'denied', onchange: null };
}
return originalQuery(parameters);
};
}
}
// Initialize the blocker
async function init() {
await loadSettings();
if (isWhitelisted()) {
console.log('[Notification Blocker] Site is whitelisted');
return;
}
overrideNotificationAPI();
blockServiceWorkerPush();
interceptPermissionsAPI();
// Wait for DOM to be ready before setting up observer
if (document.body) {
setupModalObserver();
} else {
document.addEventListener('DOMContentLoaded', setupModalObserver);
}
}
// Listen for settings updates from popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'updateSettings') {
settings = { ...settings, ...message.settings };
sendResponse({ success: true });
}
});
// Start the extension
init();
})();
This content script implements four powerful layers of defense against notification requests. The first layer overrides the Notification.requestPermission() method to intercept calls and return “denied” instead of showing the browser’s permission dialog. The second layer blocks service worker registration when it is used for push notifications, preventing websites from registering push notification handlers. The third layer intercepts the newer Permissions API that some modern websites use to check notification permission status. The fourth layer uses a MutationObserver to detect and remove custom modal dialogs that websites create to ask for notification permissions.
The script also includes functionality to load user settings from Chrome’s storage API, allowing users to whitelist specific sites where they do want to receive notifications. This is an important feature for any well-designed extension because it gives users granular control over the blocking behavior. The extension checks each website against the whitelist before applying any blocking, ensuring that users can still receive notifications from trusted sources.
Creating the Popup Interface
Every good Chrome extension needs a user interface that allows users to configure its behavior. For our notification blocker, we will create a simple yet functional popup that appears when users click the extension icon in their browser toolbar. This popup will display statistics about blocked notifications, provide toggles to enable or disable blocking, and allow users to manage their whitelist.
The popup consists of three files: an HTML file that defines the structure, a CSS file that styles the interface, and a JavaScript file that handles user interactions and communicates with our content script. Let us start with the HTML file.
<!-- popup/popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification Blocker</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<header>
<h1>Notification Blocker</h1>
<p class="subtitle">Stop annoying website popups</p>
</header>
<div class="stats">
<div class="stat-item">
<span class="stat-value" id="blockedCount">0</span>
<span class="stat-label">Notifications Blocked</span>
</div>
</div>
<div class="controls">
<div class="control-group">
<label class="toggle">
<input type="checkbox" id="blockPermissions" checked>
<span class="slider"></span>
</label>
<span class="control-label">Block Permission Requests</span>
</div>
<div class="control-group">
<label class="toggle">
<input type="checkbox" id="blockPush" checked>
<span class="slider"></span>
</label>
<span class="control-label">Block Push Notifications</span>
</div>
<div class="control-group">
<label class="toggle">
<input type="checkbox" id="blockModals" checked>
<span class="slider"></span>
</label>
<span class="control-label">Block Custom Modals</span>
</div>
</div>
<div class="whitelist-section">
<h3>Whitelist</h3>
<p class="hint">Add domains where you want to allow notifications</p>
<div class="whitelist-input">
<input type="text" id="whitelistInput" placeholder="example.com">
<button id="addWhitelist">Add</button>
</div>
<ul id="whitelistItems" class="whitelist-items"></ul>
</div>
<footer>
<button id="resetStats" class="secondary-button">Reset Statistics</button>
</footer>
</div>
<script src="popup.js"></script>
</body>
</html>
The popup interface provides a clean, intuitive way for users to control their notification blocking. The statistics display shows how many notifications have been blocked, giving users immediate feedback on the extension’s effectiveness. The toggle switches allow users to enable or disable specific blocking features, providing flexibility for different use cases. The whitelist section enables users to add domains where they want to allow notifications, addressing the common need to receive notifications from trusted websites.
/* popup/popup.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
width: 320px;
background: #f5f5f5;
color: #333;
}
.container {
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
font-size: 18px;
font-weight: 600;
color: #1a73e8;
}
.subtitle {
font-size: 12px;
color: #666;
margin-top: 4px;
}
.stats {
background: #fff;
border-radius: 8px;
padding: 16px;
text-align: center;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: #1a73e8;
display: block;
}
.stat-label {
font-size: 12px;
color: #666;
}
.controls {
background: #fff;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.control-group {
display: flex;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.control-group:last-child {
border-bottom: none;
}
.control-label {
font-size: 13px;
flex: 1;
}
/* Toggle switch styling */
.toggle {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
margin-right: 12px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.3s;
border-radius: 22px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #1a73e8;
}
input:checked + .slider:before {
transform: translateX(18px);
}
.whitelist-section {
background: #fff;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.whitelist-section h3 {
font-size: 14px;
margin-bottom: 4px;
}
.hint {
font-size: 11px;
color: #666;
margin-bottom: 12px;
}
.whitelist-input {
display: flex;
gap: 8px;
}
.whitelist-input input {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
}
.whitelist-input button {
padding: 8px 12px;
background: #1a73e8;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.whitelist-input button:hover {
background: #1557b0;
}
.whitelist-items {
list-style: none;
margin-top: 12px;
max-height: 120px;
overflow-y: auto;
}
.whitelist-items li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #eee;
font-size: 12px;
}
.whitelist-items li button {
background: #ff4444;
color: white;
border: none;
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
}
footer {
text-align: center;
}
.secondary-button {
padding: 8px 16px;
background: transparent;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
color: #666;
}
.secondary-button:hover {
background: #eee;
}
The CSS styling creates a modern, clean interface that matches Chrome’s design language. The toggle switches use a familiar design pattern that users will immediately understand. The color scheme uses blue as the primary accent color, consistent with Chrome’s own interface. The layout is compact and efficient, making the most of the limited popup space while remaining easy to read and use.
// popup/popup.js
document.addEventListener('DOMContentLoaded', () => {
// Load current settings
loadSettings();
loadStatistics();
loadWhitelist();
// Event listeners for toggles
document.getElementById('blockPermissions').addEventListener('change', updateSettings);
document.getElementById('blockPush').addEventListener('change', updateSettings);
document.getElementById('blockModals').addEventListener('change', updateSettings);
// Whitelist functionality
document.getElementById('addWhitelist').addEventListener('click', addToWhitelist);
document.getElementById('whitelistInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') addToWhitelist();
});
// Reset statistics
document.getElementById('resetStats').addEventListener('click', resetStatistics);
});
function loadSettings() {
chrome.storage.sync.get(['settings'], (result) => {
if (result.settings) {
document.getElementById('blockPermissions').checked = result.settings.blockPermissionRequests;
document.getElementById('blockPush').checked = result.settings.blockPushNotifications;
document.getElementById('blockModals').checked = result.settings.blockCustomModals;
}
});
}
function updateSettings() {
const settings = {
blockPermissionRequests: document.getElementById('blockPermissions').checked,
blockPushNotifications: document.getElementById('blockPush').checked,
blockCustomModals: document.getElementById('blockModals').checked
};
chrome.storage.sync.set({ settings }, () => {
// Notify content script of settings change
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs[0]) {
chrome.tabs.sendMessage(tabs[0].id, {
type: 'updateSettings',
settings
});
}
});
});
}
function loadStatistics() {
chrome.storage.sync.get(['blockedCount'], (result) => {
document.getElementById('blockedCount').textContent = result.blockedCount || 0;
});
}
function resetStatistics() {
chrome.storage.sync.set({ blockedCount: 0 }, () => {
document.getElementById('blockedCount').textContent = '0';
});
}
function loadWhitelist() {
chrome.storage.sync.get(['settings'], (result) => {
const whitelist = result.settings?.whitelist || [];
renderWhitelist(whitelist);
});
}
function addToWhitelist() {
const input = document.getElementById('whitelistInput');
const domain = input.value.trim().toLowerCase();
if (!domain) return;
chrome.storage.sync.get(['settings'], (result) => {
const settings = result.settings || { whitelist: [] };
if (!settings.whitelist.includes(domain)) {
settings.whitelist.push(domain);
chrome.storage.sync.set({ settings }, () => {
input.value = '';
renderWhitelist(settings.whitelist);
});
}
});
}
function removeFromWhitelist(domain) {
chrome.storage.sync.get(['settings'], (result) => {
const settings = result.settings || { whitelist: [] };
settings.whitelist = settings.whitelist.filter(d => d !== domain);
chrome.storage.sync.set({ settings }, () => {
renderWhitelist(settings.whitelist);
});
});
}
function renderWhitelist(whitelist) {
const container = document.getElementById('whitelistItems');
container.innerHTML = '';
whitelist.forEach(domain => {
const li = document.createElement('li');
li.innerHTML = `
<span>${domain}</span>
<button onclick="removeFromWhitelist('${domain}')">Remove</button>
`;
container.appendChild(li);
});
}
The popup JavaScript handles all user interactions and manages communication between the popup interface and Chrome’s storage system. It loads existing settings when the popup opens, updates settings when users toggle the switches, and manages the whitelist by adding and removing domains. The script also includes functionality to reset the blocked notification count, which is useful for users who want to start fresh with their statistics.
Testing Your Extension
Now that you have created all the necessary files for your notification blocker, it is time to test it in Chrome. Testing is a crucial step in development that ensures your extension works correctly and provides the expected user experience. Let us walk through the process of loading and testing your extension.
First, open Chrome and navigate to chrome://extensions/ in your address bar. Make sure Developer Mode is enabled in the top right corner. Click the “Load unpacked” button and navigate to the folder containing your extension files. Select the folder and click “Open” to load your extension. You should see your notification blocker appear in the list of installed extensions, complete with its name, description, and icon.
Once loaded, you can test the extension by visiting websites that typically show notification permission requests. Some news sites, blogs, and web applications are notorious for showing these requests, making them ideal for testing. When you visit such a site, you should notice that the notification permission dialog does not appear, and any custom notification modals are automatically removed from the page. You can verify this by opening Chrome’s developer console, where you should see log messages confirming that notification requests have been blocked.
To test the popup interface, click the extension icon in your browser toolbar. The popup should appear with your statistics, toggles, and whitelist controls. Try toggling different options and observe how the behavior changes. Add a domain to your whitelist and visit that domain to confirm that notifications are allowed there. This testing process helps you understand exactly how your extension works and identify any areas that need improvement.
Publishing Your Extension
After thorough testing and refinement, you may want to publish your notification blocker to the Chrome Web Store so others can benefit from it. Publishing an extension requires a Google Developer account and involves several steps to ensure your extension meets Chrome’s policies and guidelines.
To publish your extension, you will need to create a zip file containing all your extension files. Navigate to your extension folder and select all the files and subfolders, then create a compressed zip archive. Next, visit the Chrome Web Store Developer Dashboard and create a new listing for your extension. You will need to provide detailed information including the extension name, description, screenshots, and privacy practices.
Before submitting, review Chrome’s policies to ensure your extension complies with all requirements. Extensions that block content must clearly disclose their functionality in the description. Your privacy policy should explain what data your extension collects and how it is used. Once your listing is complete, you can submit it for review, which typically takes a few days to complete.
Conclusion
Congratulations! You have successfully built a complete notification blocker Chrome extension from scratch. This extension demonstrates how powerful Chrome extensions can be in enhancing the browsing experience by addressing real user pain points. The multi-layered approach to blocking notification requests ensures that users are protected against both native browser prompts and custom website modals, while the whitelist feature provides the flexibility needed for legitimate notification use cases.
The skills you have learned in building this extension apply to many other types of Chrome extensions you might want to create. Understanding manifest configuration, content scripts, popup interfaces, and the Chrome storage API provides a solid foundation for any extension development project. You can now extend this notification blocker with additional features like automatic updates, more sophisticated blocking rules, or synchronization across devices.
Building browser extensions is an excellent way to customize your web experience and solve problems you encounter in your daily browsing. The notification blocker you created today is just the beginning—continue experimenting, learning, and building extensions that make the web a better place for everyone.