A study schedule planner extension built on Manifest V3 consists of several interconnected parts: Popup UI: Quick access to view today’s sessions and add new ones Side Panel: Detailed schedule view with calendar and progress tracking Background Service Worker: Handles notifications, alarm...

Study Schedule Planner Chrome Extension (2026)

Last updated: April 17, 2026

Chrome extension study schedule planners transform browser-based learning by integrating task management directly into your workflow. For developers and power users, building a custom planner means you get exactly the features you need without relying on generic productivity apps.

Why Build a Study Schedule Planner Extension

Most productivity tools force you to context-switch between your browser and a separate app. A chrome extension keeps your study schedule where you’re already working. You can create study sessions, set reminders, and track progress without leaving your current tab.

A custom extension also lets you integrate with your existing workflow. Connect it to your note-taking app, sync with your calendar, or automate study session starts based on your coding environment. The flexibility makes a significant difference for developers who spend most of their time in the browser.

The alternative. a standalone web app or native application. introduces friction at exactly the wrong moments. When you are deep in a documentation page or a tutorial and realize you need to log a study session, a popup two clicks away is used. An app requiring you to switch windows and log in is skipped. Browser extensions win on friction, and friction determines whether habits form.

Comparing Your Options: Custom Extension vs. Existing Tools

Before building, it is worth understanding where custom extensions outperform existing solutions. and where they do not.

Criteria	Custom Extension	Generic Productivity App	Calendar + Reminders
Browser integration	Native	None	None
Setup effort	High (build it)	Low	Low
Feature fit	Exact	Approximate	Poor for study workflows
Data ownership	Full	Vendor-controlled	Platform-controlled
Cross-device sync	Possible via chrome.storage.sync	Usually included	Usually included
Pomodoro support	Build it in	Often included	Manual
Subject-level analytics	Build it in	Rarely available	None
Offline support	Full	Varies	Full
Cost	Development time	Often subscription	Free

The case for building is strongest when you need subject-level analytics, deep browser integration, or a workflow that no off-the-shelf tool supports. If you just need basic reminders, a calendar works fine.

Core Architecture

A study schedule planner extension built on Manifest V3 consists of several interconnected parts:

Popup UI: Quick access to view today’s sessions and add new ones
Side Panel: Detailed schedule view with calendar and progress tracking
Background Service Worker: Handles notifications, alarms, and data persistence
Storage API: Syncs data across devices using chrome.storage.sync

Here’s the manifest structure:

{
 "manifest_version": 3,
 "name": "Study Schedule Planner",
 "version": "1.0",
 "permissions": ["storage", "alarms", "notifications", "sidePanel"],
 "action": {
 "default_popup": "popup.html",
 "default_title": "Study Planner"
 },
 "side_panel": {
 "default_path": "sidepanel.html"
 },
 "background": {
 "service_worker": "background.js"
 }
}

The popup serves as a quick-entry point for checking the next session or adding a quick study block. The side panel provides the full scheduling interface for detailed planning.

One important architectural decision is where to draw the boundary between the popup and the side panel. A good rule of thumb: if the user needs to see it while actively browsing (current session status, time remaining, next session), put it in the popup. If it requires focused attention (schedule planning, analytics, session review), put it in the side panel. Mixing these concerns produces a cluttered popup and an underused side panel.

Project File Structure

A clean file structure makes the extension maintainable as it grows:

study-planner/
 manifest.json
 popup.html
 popup.js
 popup.css
 sidepanel.html
 sidepanel.js
 sidepanel.css
 background.js
 icons/
 icon16.png
 icon48.png
 icon128.png
 utils/
 storage.js # Shared storage helpers
 sessions.js # Session model and CRUD
 time.js # Date/time formatting utilities

Separating storage and session logic into utility modules prevents duplication between the popup and side panel scripts. Both pages import from the same utils/ files, so a change to the session data model only needs to happen in one place.

Implementing Session Management

The core data model revolves around study sessions. Each session needs a subject, duration, scheduled time, and completion status. Store these as JSON objects:

// session structure
{
 id: "session_123456",
 subject: "JavaScript Async Patterns",
 duration: 45, // minutes
 scheduledTime: "2026-03-15T14:00:00Z",
 completed: false,
 notes: ""
}

In your background script, handle session CRUD operations:

chrome.storage.sync.get(["sessions"], (result) => {
 const sessions = result.sessions || [];
 // Process sessions
});
function addSession(session) {
 chrome.storage.sync.get(["sessions"], (result) => {
 const sessions = result.sessions || [];
 sessions.push(session);
 chrome.storage.sync.set({ sessions });
 });
}

For a more solid implementation, wrap the storage calls in a dedicated module that handles errors and provides consistent IDs:

// utils/sessions.js
function generateId() {
 return "session_" + Date.now() + "_" + Math.random().toString(36).slice(2, 7);
}
function getSessions() {
 return new Promise((resolve) => {
 chrome.storage.sync.get(["sessions"], (result) => {
 resolve(result.sessions || []);
 });
 });
}
function saveSession(sessionData) {
 return getSessions().then((sessions) => {
 const session = {
 id: generateId(),
 subject: sessionData.subject,
 duration: sessionData.duration,
 scheduledTime: sessionData.scheduledTime,
 completed: false,
 notes: sessionData.notes || "",
 };
 sessions.push(session);
 return new Promise((resolve) => {
 chrome.storage.sync.set({ sessions }, () => resolve(session));
 });
 });
}
function markComplete(sessionId) {
 return getSessions().then((sessions) => {
 const updated = sessions.map((s) =>
 s.id === sessionId ? { ...s, completed: true, completedAt: new Date().toISOString() } : s
 );
 return new Promise((resolve) => {
 chrome.storage.sync.set({ sessions: updated }, resolve);
 });
 });
}
function deleteSession(sessionId) {
 return getSessions().then((sessions) => {
 const filtered = sessions.filter((s) => s.id !== sessionId);
 return new Promise((resolve) => {
 chrome.storage.sync.set({ sessions: filtered }, resolve);
 });
 });
}

Using Promises instead of raw callbacks makes it much easier to chain operations in the UI code. When the user submits a new session form and you need to save the session, schedule an alarm, and then update the UI, Promise chaining keeps the flow readable.

Setting Up Reminders with Alarms

The Chrome Alarms API provides reliable notification scheduling even when the extension isn’t actively running. Set an alarm for each study session:

function scheduleReminder(session) {
 const reminderTime = new Date(session.scheduledTime);
 reminderTime.setMinutes(reminderTime.getMinutes() - 10); // 10 min before
 const delay = reminderTime.getTime() - Date.now();
 if (delay > 0) {
 chrome.alarms.create(session.id, {
 delayInMinutes: delay / 60000,
 periodInMinutes: false
 });
 }
}
// Listen for alarm triggers
chrome.alarms.onAlarm.addListener((alarm) => {
 chrome.notifications.create({
 type: "basic",
 iconUrl: "icons/icon48.png",
 title: "Study Session Starting",
 message: `Your study session begins in 10 minutes: ${alarm.name}`
 });
});

This approach works reliably because Chrome maintains alarm processes in the background even when all extension pages are closed.

An important limitation: Chrome alarms have a minimum delay of 1 minute. For sessions that start very soon, you need to handle the “immediate” case differently. Also, alarms are cleared when the extension updates or when the user disables and re-enables it. Reschedule alarms on extension startup:

// background.js - reschedule alarms on startup
chrome.runtime.onStartup.addListener(rescheduleAllAlarms);
chrome.runtime.onInstalled.addListener(rescheduleAllAlarms);
function rescheduleAllAlarms() {
 getSessions().then((sessions) => {
 const upcoming = sessions.filter(
 (s) => !s.completed && new Date(s.scheduledTime) > new Date()
 );
 upcoming.forEach((session) => scheduleReminder(session));
 });
}

Without this, users who restart Chrome lose their scheduled reminders until they reopen the extension.

Building the Side Panel Interface

The side panel becomes your main planning hub. Include a weekly calendar view, session list, and progress statistics:

// sidepanel.js - render weekly view
function renderWeekView(sessions) {
 const today = new Date();
 const weekStart = new Date(today);
 weekStart.setDate(today.getDate() - today.getDay());
 const weekDays = [];
 for (let i = 0; i < 7; i++) {
 const day = new Date(weekStart);
 day.setDate(weekStart.getDate() + i);
 weekDays.push(day);
 }
 const container = document.getElementById("week-grid");
 weekDays.forEach(day => {
 const dayCell = document.createElement("div");
 dayCell.className = "day-cell";
 dayCell.dataset.date = day.toISOString();
 const daySessions = sessions.filter(s =>
 new Date(s.scheduledTime).toDateString() === day.toDateString()
 );
 daySessions.forEach(session => {
 const sessionEl = createSessionElement(session);
 dayCell.appendChild(sessionEl);
 });
 container.appendChild(dayCell);
 });
}

For the session elements, show completion status visually and provide quick action buttons:

function createSessionElement(session) {
 const el = document.createElement("div");
 el.className = "session-block" + (session.completed ? " completed" : "");
 el.dataset.sessionId = session.id;
 const timeStr = new Date(session.scheduledTime).toLocaleTimeString([], {
 hour: "2-digit",
 minute: "2-digit",
 });
 el.innerHTML = `
 <div class="session-time">${timeStr}</div>
 <div class="session-subject">${session.subject}</div>
 <div class="session-duration">${session.duration} min</div>
 <div class="session-actions">
 <button class="btn-complete" data-id="${session.id}">
 ${session.completed ? "Undo" : "Done"}
 </button>
 <button class="btn-delete" data-id="${session.id}">Delete</button>
 </div>
 `;
 return el;
}

Style the interface to match Chrome’s native aesthetic. Use system fonts, subtle borders, and a clean color palette that won’t distract from your actual work.

For CSS, a minimal approach works well:

/* sidepanel.css */
:root {
 --bg: #ffffff;
 --surface: #f8f9fa;
 --border: #e0e0e0;
 --text: #202124;
 --text-secondary: #5f6368;
 --accent: #1a73e8;
 --completed: #34a853;
}
body {
 font-family: "Google Sans", Roboto, system-ui, sans-serif;
 font-size: 13px;
 color: var(--text);
 background: var(--bg);
 margin: 0;
 padding: 12px;
}
.week-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 4px;
 margin-bottom: 16px;
}
.session-block {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 4px;
 padding: 6px;
 margin-bottom: 4px;
 font-size: 12px;
}
.session-block.completed {
 opacity: 0.6;
 border-left: 3px solid var(--completed);
}

Progress Tracking

Track completion rates to maintain motivation. Store completion data alongside sessions:

function updateProgress() {
 chrome.storage.sync.get(["sessions"], (result) => {
 const sessions = result.sessions || [];
 const completed = sessions.filter(s => s.completed).length;
 const total = sessions.length;
 const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
 document.getElementById("progress-rate").textContent = `${rate}%`;
 document.getElementById("progress-bar").style.width = `${rate}%`;
 });
}

Add subject-specific tracking to identify which topics need more attention:

function getSubjectStats() {
 chrome.storage.sync.get(["sessions"], (result) => {
 const sessions = result.sessions || [];
 const subjects = {};
 sessions.forEach(session => {
 if (!subjects[session.subject]) {
 subjects[session.subject] = { total: 0, completed: 0, totalMinutes: 0 };
 }
 subjects[session.subject].total++;
 subjects[session.subject].totalMinutes += session.duration;
 if (session.completed) {
 subjects[session.subject].completed++;
 }
 });
 renderSubjectStats(subjects);
 });
}

Display these stats in a sortable table so you can quickly see which subjects are falling behind:

function renderSubjectStats(subjects) {
 const container = document.getElementById("subject-stats");
 const rows = Object.entries(subjects)
 .map(([subject, stats]) => ({
 subject,
 completionRate: Math.round((stats.completed / stats.total) * 100),
 totalHours: Math.round(stats.totalMinutes / 60 * 10) / 10,
 ...stats,
 }))
 .sort((a, b) => a.completionRate - b.completionRate); // Show lowest first
 container.innerHTML = `
 <table>
 <thead>
 <tr>
 <th>Subject</th>
 <th>Sessions</th>
 <th>Completed</th>
 <th>Hours</th>
 <th>Rate</th>
 </tr>
 </thead>
 <tbody>
 ${rows.map(r => `
 <tr>
 <td>${r.subject}</td>
 <td>${r.total}</td>
 <td>${r.completed}</td>
 <td>${r.totalHours}h</td>
 <td>
 <div class="mini-bar">
 <div class="mini-bar-fill" style="width:${r.completionRate}%"></div>
 </div>
 ${r.completionRate}%
 </td>
 </tr>
 `).join("")}
 </tbody>
 </table>
 `;
}

Sorting by lowest completion rate by default surfaces the subjects that need attention without requiring the user to hunt for problem areas.

Adding Advanced Features

Once the core functionality works, enhance the planner with features that matter to developers:

Pomodoro Integration: Add a built-in timer that enforces focused work blocks. Use the chrome.idle API to detect when you’ve stepped away and pause the timer automatically.

// Pomodoro timer state
let timerState = {
 running: false,
 remaining: 25 * 60, // seconds
 sessionId: null,
 intervalHandle: null,
};
function startPomodoro(sessionId, durationMinutes) {
 timerState = {
 running: true,
 remaining: durationMinutes * 60,
 sessionId,
 intervalHandle: setInterval(tick, 1000),
 };
 chrome.idle.setDetectionInterval(60);
 chrome.idle.onStateChanged.addListener(handleIdleChange);
}
function tick() {
 timerState.remaining--;
 broadcastTimerUpdate();
 if (timerState.remaining <= 0) {
 finishPomodoro();
 }
}
function handleIdleChange(state) {
 if (state === "idle" && timerState.running) {
 pausePomodoro();
 chrome.notifications.create({
 type: "basic",
 iconUrl: "icons/icon48.png",
 title: "Timer Paused",
 message: "You appear to have stepped away. Timer paused.",
 });
 }
}
function broadcastTimerUpdate() {
 chrome.runtime.sendMessage({
 type: "TIMER_UPDATE",
 remaining: timerState.remaining,
 sessionId: timerState.sessionId,
 });
}

The broadcastTimerUpdate call lets both the popup and the side panel subscribe to timer ticks and update their displays without each page needing to manage its own timer state.

Keyboard Shortcuts: Register global shortcuts for common actions:

chrome.commands.onCommand.addListener((command) => {
 if (command === "add-session") {
 chrome.sidePanel.open();
 } else if (command === "toggle-timer") {
 // Start or pause the current session timer
 }
});

"commands": {
 "add-session": {
 "suggested_key": {
 "default": "Ctrl+Shift+S",
 "mac": "Command+Shift+S"
 },
 "description": "Open study planner side panel"
 },
 "toggle-timer": {
 "suggested_key": {
 "default": "Ctrl+Shift+T",
 "mac": "Command+Shift+T"
 },
 "description": "Start or pause current session timer"
 }
}

Data Export: Allow exporting your study data for analysis in other tools:

function exportToCSV() {
 chrome.storage.sync.get(["sessions"], (result) => {
 const sessions = result.sessions;
 const csv = convertToCSV(sessions);
 const blob = new Blob([csv], { type: "text/csv" });
 const url = URL.createObjectURL(blob);
 chrome.downloads.download({
 url: url,
 filename: "study-schedule.csv"
 });
 });
}
function convertToCSV(sessions) {
 const headers = ["id", "subject", "duration", "scheduledTime", "completed", "completedAt", "notes"];
 const rows = sessions.map((s) =>
 headers.map((h) => JSON.stringify(s[h] ?? "")).join(",")
 );
 return [headers.join(","), ...rows].join("\n");
}

Add the downloads permission to your manifest when implementing this feature. The exported CSV opens cleanly in Excel or Google Sheets, where you can build pivot tables to analyze your study patterns over longer time horizons.

Handling the chrome.storage.sync Quota

One gotcha that trips up many extension developers: chrome.storage.sync has hard quotas. The per-item limit is 8KB and the total quota is 100KB. For a study planner storing many sessions with long notes, you can hit these limits.

A practical approach is to archive completed sessions to chrome.storage.local (which has a 10MB default limit) and keep only active and recently completed sessions in sync storage:

async function archiveOldSessions() {
 const sessions = await getSessions();
 const thirtyDaysAgo = new Date();
 thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
 const toArchive = sessions.filter(
 (s) => s.completed && new Date(s.completedAt) < thirtyDaysAgo
 );
 const toKeep = sessions.filter(
 (s) => !toArchive.find((a) => a.id === s.id)
 );
 // Move old completed sessions to local storage
 const existing = await new Promise((resolve) =>
 chrome.storage.local.get(["archive"], (r) => resolve(r.archive || []))
 );
 await new Promise((resolve) =>
 chrome.storage.local.set({ archive: [...existing, ...toArchive] }, resolve)
 );
 // Update sync storage with only recent sessions
 await new Promise((resolve) =>
 chrome.storage.sync.set({ sessions: toKeep }, resolve)
 );
}

Run archiveOldSessions on extension startup to keep sync storage lean. Users who study heavily and add detailed notes will appreciate not hitting quota errors.

Testing Your Extension

Before distributing, test the extension systematically against common failure modes:

Test checklist:
[ ] Add a session with a future time -> alarm fires at expected time
[ ] Add a session with a past time -> no alarm created, no crash
[ ] Mark session complete -> progress bar updates, session shows completed state
[ ] Delete session -> removed from storage, alarm cleared
[ ] Add 50+ sessions -> no performance degradation in week view
[ ] Open popup while side panel is open -> both show consistent data
[ ] Disable extension, re-enable -> alarms rescheduled correctly
[ ] Export CSV -> opens correctly in spreadsheet app
[ ] Keyboard shortcut -> side panel opens

Chrome DevTools provides access to extension storage state through the Application tab. Use this to inspect and manually edit storage during testing rather than relying solely on the extension UI.

Deployment and Distribution

Package your extension for distribution through the Chrome Web Store or as a direct CRX install. Prepare your store listing with clear screenshots, a detailed description, and appropriate categorization. The store handles auto-updates for registered extensions.

For the store listing, screenshot the side panel on a realistic-looking study schedule rather than placeholder content. Reviewers and potential users both respond better to screenshots that demonstrate real utility.

For internal distribution within a team, use the Enterprise Management console or distribute the unpacked extension with clear installation instructions. Unpacked extensions require Developer Mode to be enabled, which is acceptable for technical teams but not suitable for non-developer users.

A well-built study schedule planner extension replaces multiple separate tools with an integrated solution. The development effort pays off through better focus, automatic reminders, and data that lives where you need it. The architecture described here scales from a personal tool to a team-distributed extension without requiring fundamental redesign.

Try it: Estimate your monthly spend with our Cost Calculator.

I'm a solo developer in Vietnam. 50K Chrome extension users. $500K+ on Upwork. 5 Claude Max subscriptions running agent fleets in parallel. These are my actual CLAUDE.md templates, orchestration configs, and prompts. Not a course. Not theory. The files I copy into every project before I write a line of code. **[See what's inside →](https://zovo.one/lifetime?utm_source=ccg&utm_medium=cta-default&utm_campaign=chrome-extension-study-schedule-planner)** $99 once. Free forever. 47/500 founding spots left.