Build a Quote of the Day Chrome Extension with an API

Chrome extensions are one of the fastest ways to put a useful tool directly in front of users every day. A quote of the day Chrome extension is a perfect beginner-to-intermediate project: it requires minimal permissions, uses a single API call, and delivers genuine value with every browser session. This guide walks you through the entire build using the QOD API.

Why Build a Quote of the Day Chrome Extension?

Browser extensions that replace or augment the new tab page consistently rank among the most-installed productivity tools in the Chrome Web Store. Embedding a daily quote directly into a user's browsing flow — rather than requiring them to visit a website — dramatically increases engagement. Whether you're shipping a standalone extension or adding a motivational touch to an existing developer tool, integrating a quote of the day via API takes less than an hour to implement correctly.

The QOD API at https://qod.io/api/today returns a single curated quote per day in clean JSON. Because the quote is cached server-side and rotates at midnight UTC, your extension only needs one network request per day, keeping it lightweight and battery-friendly.

Project Structure and Manifest Setup

Chrome extensions follow a strict file-based structure. For this project you need four files:

manifest.json — declares extension metadata and permissions
popup.html — the UI rendered when the user clicks the extension icon
popup.js — fetches the quote and injects it into the DOM
icon.png — a 128×128 icon for the Chrome Web Store listing

Start with a Manifest V3 declaration, which is required for all new Chrome extensions:

{
  "manifest_version": 3,
  "name": "Quote of the Day",
  "version": "1.0",
  "description": "Daily inspirational quotes powered by qod.io",
  "permissions": [],
  "host_permissions": ["https://qod.io/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Note that host_permissions is used instead of the old permissions array for external URLs in MV3. You do not need the storage permission to cache the quote — you can use localStorage from within the popup context instead.

Building the Popup UI

Keep the popup HTML minimal and focused. A clean dark card with the quote text and author name is all you need:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body{width:320px;padding:20px;background:#0f1117;
         color:#c9d1d9;font-family:system-ui,sans-serif}
    #quote{font-size:1rem;line-height:1.6;margin-bottom:12px}
    #author{color:#58a6ff;font-size:.875rem}
    #error{color:#f85149;font-size:.85rem}
  </style>
</head>
<body>
  <p id="quote">Loading…</p>
  <p id="author"></p>
  <p id="error"></p>
  <script src="popup.js"></script>
</body>
</html>

Fetching the Quote with Caching

The popup.js file handles the API call and a simple date-based cache so the extension doesn't fire a network request every single time the popup opens:

const CACHE_KEY = 'qod_cache';
const today = new Date().toISOString().slice(0, 10);
const cached = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');

if (cached.date === today) {
  render(cached.quote, cached.author);
} else {
  fetch('https://qod.io/api/today')
    .then(r => r.json())
    .then(data => {
      const q = data.quote;
      const a = data.author;
      localStorage.setItem(CACHE_KEY,
        JSON.stringify({ date: today, quote: q, author: a }));
      render(q, a);
    })
    .catch(() => {
      document.getElementById('error').textContent =
        'Could not load quote. Check your connection.';
    });
}

function render(quote, author) {
  document.getElementById('quote').textContent = '\u201C' + quote + '\u201D';
  document.getElementById('author').textContent = '\u2014 ' + author;
}

This pattern stores the quote and the current date in localStorage. On subsequent opens the same day, the extension renders instantly from cache. On the next calendar day, a fresh API call is made automatically.

Loading and Testing the Extension Locally

To test your quote of the day Chrome extension before publishing, open chrome://extensions in your browser, enable Developer Mode in the top-right corner, then click "Load unpacked" and select your project folder. The extension icon will appear in your toolbar immediately. Click it to verify the quote renders correctly.

Use the Chrome DevTools console (right-click the popup → Inspect) to debug any fetch errors. Common issues include missing host_permissions in the manifest or a CORS misconfiguration on the API — the QOD API includes the correct Access-Control-Allow-Origin header so this should not be a problem.

Publishing to the Chrome Web Store

Once your extension is working locally, zip the project folder and head to the Chrome Web Store Developer Dashboard. A one-time $5 developer registration fee applies. You'll need screenshots (1280×800 recommended), a short description using keywords like daily quotes, inspirational quotes, and motivational quotes, and a privacy policy if you collect any user data. Since this extension only reads from a public API and stores data locally, the privacy policy can be a simple one-pager stating no personal data is collected or transmitted.

Extending the Feature Set

Once your base quote of the day Chrome extension is live, consider these enhancements to increase retention and ratings:

Category filtering: The QOD API supports category parameters. Let users choose between inspirational, motivational, or philosophical quotes via a settings page.
Share button: Add a Twitter/X share link pre-populated with the quote text and a link back to qod.io.
New Tab override: Replace the default new tab page with a full-screen quote display by adding "chrome_url_overrides": {"newtab": "popup.html"} to your manifest.
Favorites list: Use chrome.storage.sync to let users save quotes across devices.

Each of these features is independently implementable and can be shipped as incremental updates, giving you a clear product roadmap from day one.