Complete guide to developing and debugging the Late Meet Chrome extension

This guide is designed to help contributors set up their development environment, debug different components of the extension, and resolve common issues efficiently.

• Dev Environment Setup
• Debugging the Service Worker
• Debugging Content Scripts
• Debugging the Offscreen Document
• Debugging the Side Panel
• Common Errors and Fixes
• Hot Reload Workflow

Before starting development, ensure you have:

• Node.js 18+ (download)
• Google Chrome (latest stable version)
• VS Code (recommended)

git clone https://github.com/shouri123/Late-Meet.git
cd Late-Meet
npm install

1. Open Chrome and navigate to chrome://extensions/
2. Toggle Developer mode in the top-right corner
3. You should now see Load unpacked button

npm run dev

This starts Vite in watch mode, rebuilding the extension automatically when you save files.

Now:

1. Open chrome://extensions/
2. Click Load unpacked
3. Navigate to the Late-Meet folder and select the dist/ folder
   • If dist/ doesn't exist, manually build: npm run build

Install these extensions in VS Code for an optimal development experience:

Enable these flags for better debugging:

1. Open chrome://flags/#extension-mime-request-handling
   • Set to Default
2. Open chrome://flags/#enable-extension-activity-log
   • Set to Enabled
3. Restart Chrome

The service worker (src/background.ts) runs in the background and handles:

• Meeting detection and state management
• Communication between content scripts and UI components
• API requests to OpenAI and ElevenLabs

This is the primary way to debug service workers in Manifest V3:

1. Open a new tab and navigate to chrome://serviceworker-internals/
2. Find "Late Meet" in the list of extensions
3. Click inspect button next to "Late Meet"
4. A DevTools window opens showing the service worker context

In the DevTools Console:

// Check current meeting state
chrome.storage.local.get(["meetingState"], (data) => {
  console.log("Current state:", data);
});

// Send a test message to content script
chrome.tabs.query({ url: "*://meet.google.com/*" }, (tabs) => {
  if (tabs[0]) {
    chrome.tabs.sendMessage(tabs[0].id, { type: "TEST_MESSAGE" });
  }
});

// View all registered listeners
// (shown automatically in Service Worker DevTools)

Check if service worker is registered:

// In background.ts console
console.log("Service worker active");

Monitor chrome.storage changes:

chrome.storage.onChanged.addListener((changes, namespace) => {
  console.log(`[${namespace}] Storage changed:`, changes);
});

Monitor message traffic:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message received:", { message, sender: sender.url });
  sendResponse({ success: true });
});

⚠️ Important: Service workers are terminated when idle (after 5 minutes) or when a new manifest is loaded. This is normal behavior.

• If your service worker stops responding, reload the extension:
  • Go to chrome://extensions/
  • Click the reload icon under "Late Meet"

The content script (src/content.ts) runs on Google Meet pages and handles:

• Detecting participant changes
• Capturing audio and meeting state
• Injecting UI elements into the Meet page
• Communicating with the service worker

1. Open Google Meet in a tab
2. Right-click on the page → Inspect (or press F12)
3. Go to Console tab
4. You're now in the page's context (not the extension context)

Content scripts have access to both the page and extension APIs:

// Check if content script is injected
console.log("Content script loaded");

// Send message to service worker
chrome.runtime.sendMessage({ type: "GET_MEETING_STATE" }, (response) =>
  console.log("Response:", response),
);

// Monitor participant changes
const observer = new MutationObserver(() => {
  console.log("DOM changed - participants may have changed");
});

observer.observe(document.body, { childList: true, subtree: true });

In Chrome DevTools:

1. Go to Sources tab
2. Left sidebar → top-level domain (e.g., meet.google.com)
3. Look for content scripts folder
4. Find and click content.ts (shows compiled JavaScript)
5. Set breakpoints directly in the code

// In Meet tab console:
// Check if content script can reach service worker
chrome.runtime.sendMessage({ type: "PING" }, (response) => {
  if (chrome.runtime.lastError) {
    console.error("Service worker not responding:", chrome.runtime.lastError);
  } else {
    console.log("Service worker responded:", response);
  }
});

The offscreen document (src/offscreen.ts) handles:

• Background audio capture processing
• WebAudio API operations
• Heavy computations that need DOM access

1. Open chrome://extensions/
2. Click Details for Late Meet
3. Scroll to Extension Manifest section
4. Find the offscreen page in the "Offscreen pages" section
5. Click inspect next to the listed offscreen page

1. When your extension creates an offscreen document:

   // In background.ts
   await chrome.offscreen.createDocument({
     url: "src/offscreen.html",
     reasons: ["AUDIO_PROCESSING"],
   });

2. Immediately open chrome://extensions/ and inspect it

// In offscreen document DevTools console:

// Check AudioContext state
const audioContext = new AudioContext();
console.log("AudioContext state:", audioContext.state);

// Test audio processing
const audioBuffer = audioContext.createBuffer(1, 44100, 44100);
console.log("Audio buffer created:", audioBuffer.duration, "seconds");

// Monitor messages from service worker
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Offscreen received:", message);
  sendResponse({ status: "processed" });
});

"Offscreen document already exists"

// In background.ts, prevent duplicate creation:
chrome.offscreen.hasDocument().then((hasDocument) => {
  if (!hasDocument) {
    chrome.offscreen.createDocument({
      url: "src/offscreen.html",
      reasons: ["AUDIO_PROCESSING"],
    });
  }
});

"Failed to create offscreen document"

• Ensure offscreen permission is in manifest.json
• Check that offscreen.html exists in src/

The side panel (dashboard, src/dashboard.ts) shows:

• Meeting summary and transcript
• Participant list
• Settings and configuration

1. Open the side panel by clicking the Late Meet extension icon
2. Right-click in the side panel → Inspect
3. DevTools opens for the side panel context

1. Go to chrome://extensions/
2. Click Details for Late Meet
3. Scroll down to Extension Pages
4. Click inspect next to dashboard.html

// In side panel DevTools console:

// Check if side panel received data from service worker
chrome.runtime.sendMessage({ type: "GET_TRANSCRIPT" }, (response) => {
  console.log("Received transcript:", response);
});

// Monitor state changes
chrome.storage.local.get(null, (data) => {
  console.log("Current side panel data:", data);
});

// Test UI interactions
const button = document.querySelector("button[data-action]");
button?.click();
console.log("Button clicked");

The side panel state is stored in chrome.storage.local:

// Save state
chrome.storage.local.set({
  dashboardState: {
    activeTab: "transcript",
    scrollPosition: 0,
  },
});

// Retrieve state
chrome.storage.local.get("dashboardState", (data) => {
  console.log("Dashboard state:", data.dashboardState);
});

Extension not loading:

• Run npm run build or npm run dev
• Navigate to chrome://extensions/
• Click Load unpacked and select dist/ folder
• Check Errors section on extension card

Features not working in Meet:

• Reload extension: chrome://extensions/ → reload icon
• Reload Meet tab (F5)
• Check Chrome version matches extension requirements
• Open content script DevTools and check console for errors

Storage issues:

// Clear all extension storage (CAUTION: destructive)
chrome.storage.local.clear();
chrome.storage.sync.clear();

The most efficient way to develop and test your changes is using the hot reload workflow.

1. Start Vite in watch mode:

   npm run dev

   This rebuilds the extension automatically when you save files.

2. Load unpacked extension:

   • Go to chrome://extensions/
   • Click Load unpacked
   • Select the dist/ folder

1. Edit src/content.ts
2. Vite rebuilds (automatic)
3. Reload the Meet tab (F5)
4. Changes appear immediately

# Terminal window 1: Vite watch
npm run dev

# Terminal window 2: In src/ directory
# Make changes to content.ts
# Reload Meet tab to see changes

1. Edit src/background.ts
2. Vite rebuilds (automatic)
3. Go to chrome://extensions/
4. Click reload icon under Late Meet
5. Changes active immediately

1. Edit src/popup.ts, src/dashboard.ts, or styles
2. Vite rebuilds (automatic)
3. Click the extension icon or re-open the side panel
4. Changes appear immediately

Terminal Setup (Recommended):

# Terminal 1: Run Vite
npm run dev

# Terminal 2: Run linter (optional, for real-time feedback)
npm run lint -- --watch

# Terminal 3: Run tests (if working on test files)
npm test

VS Code Setup (Recommended):

1. Install Thunder Client or REST Client for API testing
2. Use Chrome DevTools in separate windows for each component:
   • Service worker: chrome://serviceworker-internals/
   • Content script: DevTools on Meet tab
   • Side panel: DevTools on side panel
3. Keep manifest.json open for quick reference

Changes not appearing after save?

# Manually rebuild
npm run build

# Or if using dev mode, restart Vite
# Ctrl+C to stop, then npm run dev

Build succeeds but extension doesn't update?

1. Go to chrome://extensions/
2. Click reload icon under Late Meet
3. If still not working, unload and reload:
   • Toggle extension off, then back on
   • Or remove and re-add from dist/ folder

// In background.ts
console.log("[ServiceWorker]", "Meeting state:", state);

// In content.ts
console.log("[ContentScript]", "Participants updated:", participants);

// In dashboard.ts
console.log("[Dashboard]", "Transcript loaded:", transcript);

• Windows/Linux: Ctrl + Shift + J (DevTools console)
• Mac: Cmd + Option + J

Create a test HTML file to test UI components in isolation:

<!-- test.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="src/theme.css" />
  </head>
  <body>
    <div id="test-container"></div>
    <script type="module">
      import { initDashboard } from "./src/dashboard";
      initDashboard(document.getElementById("test-container"));
    </script>
  </body>
</html>

Service worker makes API calls to OpenAI and ElevenLabs. Monitor them:

1. Open chrome://serviceworker-internals/
2. Inspect service worker
3. Open Network tab in DevTools
4. Perform action that makes API call
5. Check request/response

• GitHub Issues: Open an issue
• Contributing Guide: See CONTRIBUTING.md
• Chrome Extension Docs: Official Manifest V3 Docs
• Security & Privacy: See SECURITY.md

Happy developing! 🚀