Build a Daily Inspiration Chrome Extension: Motivational Quotes on New Tab
Have you ever opened a new tab in your browser and felt instantly motivated? For millions of Chrome users, the new tab page is just a blank canvas or a cluttered homepage filled with news and distractions. What if you could transform that moment into an opportunity for daily inspiration? In this comprehensive tutorial, we will walk you through building a powerful Chrome extension that displays fresh motivational quotes every time you open a new tab.
This project is perfect for developers looking to create their first Chrome extension or experienced developers wanting to explore the new tab override functionality in Manifest V3. By the end of this guide, you will have a fully functional daily inspiration extension that you can customize, publish to the Chrome Web Store, and share with the world.
Why Build a Daily Inspiration Chrome Extension
The Chrome Web Store is filled with productivity tools, ad blockers, and utility extensions, but there is a growing demand for extensions that improve mental wellness and daily motivation. A daily inspiration extension serves multiple purposes that make it an excellent project choice.
First, the development complexity is manageable for beginners while still teaching important concepts about Chrome extension architecture. You will learn about manifest files, content scripts, local storage, and new tab overrides—skills that transfer to any future extension project. The extension solves a genuine problem: users want positive reinforcement and motivation without seeking it out actively.
Second, the motivational quotes niche has proven commercial viability. Extensions like Momentum and Unsplash’s daily photo extension demonstrate that users appreciate delightful surprises when opening new tabs. Adding inspiring quotes creates an emotional connection with your extension that keeps users engaged.
Third, this project offers excellent customization opportunities. Once you have the basic functionality working, you can add features like customizable quote categories, multiple themes, background images, the ability to save favorite quotes, and even integration with productivity tools. The base project becomes a foundation for endless expansion.
Finally, building a daily inspiration extension teaches you about API integration, data management, and creating satisfying user experiences. These skills are valuable for any web developer or extension creator.
Understanding Chrome Extension Architecture
Before diving into code, let us establish a solid understanding of how Chrome extensions work and specifically how new tab pages function within the extension ecosystem.
Chrome extensions are essentially web applications packaged with special files that tell Chrome how they should behave. At the core of every extension is the manifest.json file, which declares permissions, defines the extension’s components, and specifies which files the browser should load.
For our daily inspiration extension, we need to understand three key concepts: the new tab override, content scripts, and the extension’s popup. The new tab override allows us to replace the default Chrome new tab page with our own HTML, CSS, and JavaScript. This is the primary feature we will implement.
Chrome extensions follow a modular architecture where different components handle different tasks. Our extension will consist of the manifest file that declares our intentions to Chrome, an HTML file for the new tab interface, a CSS file for styling, and a JavaScript file for fetching and displaying quotes. We will also include a quotes data file containing our collection of motivational sayings.
Modern Chrome extensions use Manifest V3, which introduced several changes from the older Manifest V2. Most notably, background scripts now run as service workers instead of persistent background pages, and certain APIs require different usage patterns. Our extension will comply with Manifest V3 requirements.
Setting Up the Project Structure
Let us begin building our extension by creating the necessary project structure. Create a new folder for your project and add the following files: manifest.json, newtab.html, newtab.css, newtab.js, and quotes.js.
First, create the manifest.json file. This is the most critical file in your extension, as it tells Chrome everything about how your extension should function. The manifest must declare the “newTab” permission in the overrides section to replace the default new tab page.
{
"manifest_version": 3,
"name": "Daily Inspiration",
"version": "1.0",
"description": "Start each day with motivational quotes on every new tab",
"permissions": ["storage"],
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
The manifest declares our extension name as “Daily Inspiration,” specifies version 1.0, and most importantly, uses the chrome_url_overrides property to tell Chrome that our newtab.html should replace the default new tab page. We also request storage permission so we can save user preferences like favorite quotes.
Creating the Quote Data Module
Now let us create the quotes.js file that will store our collection of motivational quotes. Having a dedicated data file makes it easy to add, remove, or update quotes without touching the main logic of our extension.
const quotes = [
{
text: "The only way to do great work is to love what you do.",
author: "Steve Jobs"
},
{
text: "Innovation distinguishes between a leader and a follower.",
author: "Steve Jobs"
},
{
text: "Stay hungry, stay foolish.",
author: "Steve Jobs"
},
{
text: "Life is what happens when you're busy making other plans.",
author: "John Lennon"
},
{
text: "The future belongs to those who believe in the beauty of their dreams.",
author: "Eleanor Roosevelt"
},
{
text: "It is during our darkest moments that we must focus to see the light.",
author: "Aristotle"
},
{
text: "The best time to plant a tree was 20 years ago. The second best time is now.",
author: "Chinese Proverb"
},
{
text: "Your time is limited, don't waste it living someone else's life.",
author: "Steve Jobs"
},
{
text: "The only impossible journey is the one you never begin.",
author: "Tony Robbins"
},
{
text: "Success is not final, failure is not fatal: it is the courage to continue that counts.",
author: "Winston Churchill"
},
{
text: "Believe you can and you're halfway there.",
author: "Theodore Roosevelt"
},
{
text: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
author: "Nelson Mandela"
},
{
text: "In the middle of difficulty lies opportunity.",
author: "Albert Einstein"
},
{
text: "What you get by achieving your goals is not as important as what you become by achieving your goals.",
author: "Zig Ziglar"
},
{
text: "The mind is everything. What you think you become.",
author: "Buddha"
},
{
text: "Strive not to be a success, but rather to be of value.",
author: "Albert Einstein"
},
{
text: "Two roads diverged in a wood, and I—I took the one less traveled by.",
author: "Robert Frost"
},
{
text: "The best revenge is massive success.",
author: "Frank Sinatra"
},
{
text: "People often say that motivation doesn't last. Well, neither does bathing — that's why we recommend it daily.",
author: "Zig Ziglar"
},
{
text: "I have not failed. I've just found 10,000 ways that won't work.",
author: "Thomas Edison"
}
];
// Export for use in other files
if (typeof module !== 'undefined' && module.exports) {
module.exports = quotes;
}
This collection provides a solid starting point with twenty diverse quotes from various influential figures. You can expand this list with hundreds more quotes, categorize them by theme (leadership, perseverance, creativity, etc.), or even fetch quotes from an external API for unlimited variety.
Building the New Tab Interface
Now we create the HTML structure for our new tab page. The newtab.html file defines the visual layout that users will see every time they open a new tab. We want a clean, inspiring design that makes the quote the focal point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Inspiration</title>
<link rel="stylesheet" href="newtab.css">
</head>
<body>
<div class="container">
<header>
<h1 class="date" id="currentDate"></h1>
</header>
<main class="quote-container">
<blockquote class="quote">
<p id="quoteText">Loading inspiration...</p>
<cite id="quoteAuthor"></cite>
</blockquote>
</main>
<footer>
<div class="actions">
<button id="newQuoteBtn" class="btn" title="Get a new quote">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 4v6h-6M1 20v-6h6"/>
<path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
</svg>
New Quote
</button>
<button id="saveQuoteBtn" class="btn btn-secondary" title="Save this quote">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
</svg>
Save
</button>
</div>
<p class="tagline">Daily Inspiration Extension</p>
</footer>
</div>
<script src="quotes.js"></script>
<script src="newtab.js"></script>
</body>
</html>
The HTML structure is intentionally simple, consisting of a container with a header showing the current date, a main section displaying the quote, and a footer with action buttons. This minimalist design ensures the quote remains the centerpiece while providing functional elements for users to get new quotes or save their favorites.
Styling Your Extension
The CSS file transforms our simple HTML into a visually appealing experience. Good design in extensions matters—users spend time looking at your new tab page, so it should be pleasant and inspiring.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.container {
max-width: 800px;
width: 90%;
text-align: center;
padding: 2rem;
}
header {
margin-bottom: 3rem;
}
.date {
font-size: 1.5rem;
font-weight: 300;
opacity: 0.9;
letter-spacing: 2px;
text-transform: uppercase;
}
.quote-container {
margin-bottom: 4rem;
}
.quote {
font-size: 2.5rem;
line-height: 1.4;
font-weight: 500;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.quote p {
margin-bottom: 1.5rem;
}
.quote cite {
display: block;
font-size: 1.25rem;
font-style: normal;
opacity: 0.85;
font-weight: 300;
}
.quote cite::before {
content: "— ";
}
footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.actions {
display: flex;
gap: 1rem;
}
.btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 50px;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
}
.tagline {
font-size: 0.875rem;
opacity: 0.6;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.quote {
font-size: 1.75rem;
}
.quote cite {
font-size: 1rem;
}
.btn {
padding: 0.6rem 1.2rem;
font-size: 0.875rem;
}
}
The styling creates a beautiful gradient background with a modern, readable quote display. The design is fully responsive and works well on both desktop and mobile devices. The glassmorphism effect on the buttons adds a contemporary touch that users appreciate.
Implementing the Core Functionality
Now we bring everything together with the JavaScript logic. The newtab.js file handles displaying quotes, managing the date, and saving user favorites using Chrome’s storage API.
// State management
let currentQuote = null;
// Initialize the extension
document.addEventListener('DOMContentLoaded', init);
function init() {
displayCurrentDate();
loadQuote();
setupEventListeners();
}
// Display today's date in a formatted way
function displayCurrentDate() {
const dateElement = document.getElementById('currentDate');
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
dateElement.textContent = new Date().toLocaleDateString('en-US', options);
}
// Load a random quote
function loadQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
currentQuote = quotes[randomIndex];
const quoteText = document.getElementById('quoteText');
const quoteAuthor = document.getElementById('quoteAuthor');
// Add fade animation
quoteText.style.opacity = 0;
setTimeout(() => {
quoteText.textContent = currentQuote.text;
quoteAuthor.textContent = currentQuote.author;
quoteText.style.opacity = 1;
quoteText.style.transition = 'opacity 0.5s ease';
}, 200);
}
// Setup button event listeners
function setupEventListeners() {
document.getElementById('newQuoteBtn').addEventListener('click', loadQuote);
document.getElementById('saveQuoteBtn').addEventListener('click', saveQuote);
}
// Save quote to Chrome storage
function saveQuote() {
if (!currentQuote) return;
chrome.storage.sync.get(['savedQuotes'], (result) => {
const savedQuotes = result.savedQuotes || [];
// Check if quote already saved
const exists = savedQuotes.some(q => q.text === currentQuote.text);
if (exists) {
showNotification('Quote already saved!');
return;
}
savedQuotes.push(currentQuote);
chrome.storage.sync.set({ savedQuotes }, () => {
showNotification('Quote saved successfully!');
});
});
}
// Show temporary notification
function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('show');
}, 10);
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, 2000);
}
The JavaScript handles several important functions. First, it displays the current date in a human-readable format. Second, it randomly selects a quote from our collection and displays it with a smooth fade animation. Third, it implements the save functionality using Chrome’s sync storage, which ensures saved quotes persist across devices when the user is signed into Chrome. Finally, it provides user feedback through temporary notifications.
Loading and Testing Your Extension
With all files created, you can now load your extension into Chrome for testing. This is an exciting moment—watching your creation come to life in the browser.
Open Chrome and navigate to chrome://extensions/ in the address bar. Enable “Developer mode” using the toggle switch in the top right corner. This reveals additional options for extension developers.
Click the “Load unpacked” button that appears after enabling developer mode. Select the folder containing your extension files. Chrome will load your extension and display it in the extensions list.
Now for the fun part: open a new tab. Instead of the usual Chrome new tab page, you should see your daily inspiration extension with a beautiful gradient background and a motivational quote. Click the “New Quote” button to cycle through different quotes, and try saving your favorites.
If you do not see your extension, check the following common issues. Ensure all file names match exactly—what you declare in the manifest must correspond to your actual files. Verify that the manifest.json has valid JSON syntax. Make sure the icons folder exists with the required icon files, or remove the icons section from the manifest for now.
Enhancing Your Extension
Once you have the basic extension working, you can add numerous enhancements to make it even more valuable to users. Here are some ideas to take your extension to the next level.
Consider adding an API integration to fetch quotes from external services. APIs like type.fit, quotable.io, or zenquotes.io provide thousands of quotes that you can fetch dynamically. This eliminates the need to manually maintain a quotes database and ensures users always have fresh content.
Implement multiple themes that users can choose from. Allow them to select different background gradients, color schemes, or even background images. Store their preference in Chrome storage and apply it when the new tab loads.
Add a favorites management page where users can view and manage their saved quotes. This requires creating a separate HTML page and adding it to the extension’s options page in the manifest. Users appreciate being able to revisit inspiring quotes they have saved.
Consider adding time-based greetings that show different quotes based on the time of day—motivational quotes for morning, encouraging quotes for afternoon, and reflective quotes for evening.
Implement quote sharing functionality that allows users to share quotes directly to social media or copy them to the clipboard with a single click.
Publishing Your Extension
When you are ready to share your extension with the world, you can publish it to the Chrome Web Store. This process requires a Google Developer account and a small one-time registration fee.
First, create your extension icons if you have not already. You need 16x16, 48x48, and 128x128 pixel icons. These appear in the Chrome toolbar, the extension management page, and the Web Store listing. Design icons that represent your extension’s purpose clearly.
Next, create a ZIP file containing all your extension files. Do not include the containing folder—just the files themselves. Ensure your manifest.json is at the root of the ZIP.
Navigate to the Chrome Web Store Developer Dashboard and create a new item. Upload your ZIP file and fill in the required information: extension name, description, and category. Upload screenshots and a promotional tile that showcase your extension’s best features.
After submitting, Google reviews your extension to ensure it meets their policies. This typically takes a few hours to a few days. Once approved, your extension becomes available to millions of Chrome users worldwide.
Conclusion
Congratulations! You have successfully built a complete Daily Inspiration Chrome Extension from scratch. You learned about Chrome extension architecture, manifest configuration, HTML and CSS for the user interface, JavaScript for dynamic functionality, and Chrome storage for persisting user data.
This project demonstrates the power and simplicity of Chrome extension development. What seemed like a complex undertaking is actually quite manageable once you understand the basic components. You now have the foundation to build more sophisticated extensions or enhance this one with additional features.
The daily inspiration extension you created fills a genuine need—users want moments of motivation throughout their workday, and delivering that through the browser they use every day creates meaningful value. Whether you keep it for personal use or publish it to the Chrome Web Store, you have created something that can positively impact people’s lives.
Remember that the best extensions evolve based on user feedback. Encourage users to share their thoughts, track which quotes resonate most, and continuously improve your creation. The journey of building great software is never truly complete—it is a continuous process of learning, iterating, and delivering value.
Now go forth and inspire!