Build a Website Uptime Monitor Chrome Extension: Complete 2025 Tutorial
Creating a website monitor extension is one of the most practical projects you can undertake as a Chrome extension developer. In today’s digital landscape, website uptime is critical for businesses, bloggers, and developers who rely on their web properties being available around the clock. A well-built uptime checker chrome extension can monitor multiple websites simultaneously, alert you instantly when a site goes down, and provide valuable statistics about availability and response times.
This comprehensive tutorial will guide you through building a fully functional website monitor extension from scratch. Whether you are a beginner looking to learn Chrome extension development or an experienced developer wanting to add a practical tool to your portfolio, this guide covers everything you need to know about creating a site down checker extension that actually works in the real world.
Understanding Website Monitoring Basics
Before we dive into the code, it’s essential to understand what website monitoring entails and why it matters. Website monitoring is the process of periodically checking whether a website is accessible and responding correctly. This goes beyond simply checking if a page loads—it includes verifying HTTP status codes, measuring response times, checking for specific content, and alerting operators when issues are detected.
When you build a website monitor extension, you are essentially creating a tool that performs these checks automatically at regular intervals. The key components of any effective uptime checker chrome extension include URL management (adding and removing websites to monitor), scheduling (determining how often to check each site), detection logic (identifying when a site is down), and notification systems (alerting users when problems are detected).
Modern website monitoring solutions handle various types of checks. HTTP checks verify that the server returns the expected status code (typically 200 OK). SSL certificate checks ensure your secure connections are valid and not expired. Content checks verify that specific text or elements are present on the page. Response time checks measure how quickly the server responds to requests. Each of these check types serves different purposes and helps ensure comprehensive website availability monitoring.
Setting Up Your Development Environment
Every successful Chrome extension project starts with proper environment setup. For this website monitor extension, you will need a code editor (Visual Studio Code is highly recommended), Google Chrome browser for testing, and basic knowledge of JavaScript, HTML, and CSS.
Create a new folder for your project called “website-monitor-extension” in your development directory. Inside this folder, create the essential files that every Chrome extension requires: manifest.json, popup.html, popup.js, background.js, and styles.css. Understanding the role of each file is crucial for building a well-structured extension.
The manifest.json file declares your extension’s permissions, version, and components to Chrome. The popup.html defines the user interface that appears when users click your extension icon. The popup.js handles the logic for the popup interface, including adding URLs, displaying monitoring results, and managing user interactions. The background.js runs in the background and performs the actual website checks at scheduled intervals. Finally, styles.css provides the visual styling for your extension’s interface.
Creating the Manifest File
The manifest.json is the backbone of any Chrome extension. For our website monitor extension, we need to declare specific permissions that allow the extension to make network requests and access storage. Here is the complete manifest configuration for our uptime checker chrome extension:
{
"manifest_version": 3,
"name": "Website Uptime Monitor",
"version": "1.0",
"description": "Monitor your websites and receive instant alerts when they go down",
"permissions": [
"storage",
"alarms",
"notifications",
"activeTab"
],
"host_permissions": [
"http://*/*",
"https://*/*"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
This manifest declares version 3 of the Chrome Extensions API, which is the current standard. The permissions array includes storage (for saving monitored URLs), alarms (for scheduling checks), and notifications (for alerting users). The host permissions allow the extension to check any website, which is essential for a general-purpose site down checker extension.
Building the Popup Interface
The popup interface is what users see when they click your extension icon. It needs to be clean, intuitive, and functional. Users should be able to add new URLs to monitor, see the current status of all monitored sites, and access basic settings.
Create popup.html with a simple form for adding URLs, a list displaying all monitored sites with their current status, and buttons for manual refresh and settings access. The HTML structure should include an input field for entering URLs, an “Add Website” button, a container for displaying the list of monitored sites, and status indicators showing whether each site is up or down.
For styling, use a clean, modern design that aligns with Chrome’s Material Design guidelines. The popup should be compact but informative, with clear visual distinctions between sites that are up (typically green), down (typically red), and checking (typically yellow or gray). Include response time information when available, as this helps users understand not just whether a site is available, but how well it is performing.
The popup JavaScript handles all user interactions. When a user adds a URL, the script validates the input (ensuring it is a valid URL format), saves it to Chrome’s storage, and triggers an immediate check. The script also loads all saved URLs from storage when the popup opens, displaying their current status. Event listeners handle button clicks, form submissions, and any user interactions with the monitored site list.
Implementing Background Monitoring Logic
The background.js file is where the real magic happens. This script runs continuously in the background, performing website checks at intervals you define. The Chrome Alarms API provides the scheduling mechanism, allowing you to set up recurring checks without consuming excessive system resources.
For the monitoring logic itself, you need to implement several key functions. First, a function to check a single URL makes an HTTP request using the fetch API and analyzes the response. Second, a function to iterate through all saved URLs and check each one. Third, a function to handle check results, updating storage with the latest status and triggering notifications when sites go down or come back up.
The URL checking function should handle various scenarios gracefully. A successful check returns a 200 status code within a reasonable timeframe (typically under 10 seconds). A failed check might return a 4xx or 5xx status code, fail to connect entirely, or timeout. Each of these scenarios should be handled appropriately, with clear status indicators and notification triggers.
async function checkWebsite(url) {
const startTime = Date.now();
try {
const response = await fetch(url, {
method: 'HEAD',
mode: 'no-cors'
});
const responseTime = Date.now() - startTime;
return {
url: url,
status: 'up',
responseTime: responseTime,
timestamp: new Date().toISOString()
};
} catch (error) {
return {
url: url,
status: 'down',
error: error.message,
timestamp: new Date().toISOString()
};
}
}
This basic implementation uses the HEAD method to minimize bandwidth while checking availability. The no-cors mode allows the request to complete without CORS errors, though it limits access to response details. For a production website monitor extension, you might need more sophisticated error handling and potentially server-side proxying for comprehensive checking.
Implementing Notifications and Alerts
One of the most valuable features of any site down checker extension is the notification system. Users need to know immediately when one of their monitored websites goes down, and equally important, they should be notified when a site comes back up after an outage.
Chrome’s Notifications API provides a straightforward way to send alerts. When a check reveals that a previously up site is now down, create a notification with the site URL and current status. Similarly, when a site that was down returns to operational status, send a recovery notification. This two-way alerting ensures users stay informed about both problems and resolutions.
The notification system should also consider notification fatigue. Sending too many notifications (for example, every few minutes during an extended outage) quickly becomes annoying. Implement a cooldown period between notifications for the same issue, and allow users to configure notification preferences in your extension settings.
Data Persistence and Storage
Chrome’s storage API provides a convenient way to persist data across browser sessions. For our website monitor extension, we need to store several types of data: the list of URLs to monitor, historical check results, user preferences, and the current monitoring schedule.
The storage structure should be well-organized for efficient access and updates. Consider using separate storage keys for different data types: “monitoredUrls” for the list of URLs, “checkHistory” for historical data, “settings” for user preferences, and “lastCheck” for timestamp information. This organization makes it easier to manage and retrieve specific data as needed.
When storing check results, balance between keeping enough history to be useful and avoiding excessive storage consumption. A rolling window approach works well—keep the last 100 checks per URL, or retain data for the last 7 days, whichever comes first. This provides sufficient historical data for analysis while preventing unbounded storage growth.
Adding Advanced Features
Once the basic monitoring functionality is working, consider adding advanced features that differentiate your website monitor extension from basic alternatives. Response time tracking and visualization help users identify performance trends and potential problems before they cause outages. SSL certificate monitoring ensures secure connections remain valid and alerts users before certificates expire.
Status page integration allows the extension to check not just the main URL but also related status pages that many services provide. Custom health check endpoints let developers create specific URLs that return appropriate status codes based on application health. Multi-region checking, while requiring server-side support, provides more comprehensive monitoring for globally distributed services.
User interface improvements can also enhance the extension. Dark mode support appeals to users who prefer darker interfaces. Bulk import and export of URL lists make it easy to migrate between devices or share configurations. Dashboard views provide at-a-glance status information without needing to open the popup. Each of these features adds value and makes your extension more useful.
Testing Your Extension
Thorough testing is essential before releasing any Chrome extension. Test the basic functionality manually by adding several test URLs and verifying that checks run correctly. Test edge cases like invalid URLs, very long response times, network failures, and sites that redirect. Test the extension under various conditions, including slow networks, intermittent connectivity, and high latency.
Chrome provides developer tools that help with extension debugging. The console in the extension popup and background script views shows JavaScript output and errors. The network tab displays all HTTP requests made by your extension. The storage tab lets you inspect and modify stored data directly. Using these tools effectively helps identify and resolve issues quickly.
Automated testing through Chrome’s extension testing APIs can verify functionality programmatically. While full automation requires additional setup, basic smoke tests that verify the extension loads correctly, can add URLs, and can perform checks provide valuable regression protection as you make changes.
Publishing Your Extension
Once testing is complete and you are confident in your extension’s quality, the next step is publishing to the Chrome Web Store. Create a developer account if you do not already have one, prepare promotional assets including screenshots and a compelling description, and submit your extension for review.
The Chrome Web Store review process ensures extensions meet quality and security standards. Your listing should clearly describe what the extension does, what permissions it requires, and how user data is handled. Include screenshots that show the extension in action and a video demonstration if possible. High-quality listings convert better and receive more favorable review outcomes.
After publishing, continue to maintain and improve your extension based on user feedback. Monitor review comments and address any issues that arise. Release updates regularly to fix bugs, add features, and keep pace with Chrome API changes. An actively maintained extension builds user trust and receives better visibility in search results.
Conclusion
Building a website monitor extension is an excellent project that combines practical utility with valuable development skills. Throughout this tutorial, you have learned how to create the core components of an uptime checker chrome extension: the manifest file, popup interface, background monitoring logic, notification system, and data persistence layer.
The site down checker extension you have built can serve as a foundation for even more sophisticated monitoring capabilities. As you become more comfortable with Chrome extension development, you can add advanced features like multi-region checking, SSL monitoring, performance analytics, and integration with external services. The skills you develop through this project apply broadly to other Chrome extension ideas you might want to pursue.
Remember that successful website monitoring requires more than just checking availability—it requires reliable alerting, historical data analysis, and user-friendly interfaces. By following this guide and focusing on these key areas, you have created a solid foundation for a website monitor extension that can genuinely help users keep their web properties running smoothly. Start building today and join the community of developers creating useful tools that make the internet more reliable for everyone.