### Settings Page Provider Configuration and Model Discovery

Source: https://context7.com/n0vella/tubesummary/llms.txt

This script manages LLM provider configuration in a standalone settings page. It pre-fills forms with existing settings, populates model autocomplete using background actions, and saves updated settings to storage.

```typescript
// src/settings-page/settings.ts

// On page load, existing settings are read from storage and pre-fill the form.
// Supported provider endpoint examples:
const providers = {
  OpenRouter:    'https://openrouter.ai/api/v1/',
  Cerebras:      'https://api.cerebras.ai/v1/',
  Groq:          'https://api.groq.com/openai/v1',
  'Together AI': 'https://api.together.xyz/v1/',
  'GitHub Models': 'https://models.github.ai/inference',
}

// Model autocomplete: triggered on focus of the model input field
// Calls background: { action: 'listModels', endpoint, apiKey }
// Populates <datalist id="models"> with <option value="model-id"> for each model

// Form submission saves settings to chrome.storage.local:
// storage.set({ settings: { prompt, endpoint, model, apiKey } })

// Reset default prompt button restores the default {transcription} prompt template.

// Save button is only enabled when form values differ from currently stored settings,
// preventing redundant writes.
```

--------------------------------

### Reading and Saving Extension Settings

Source: https://context7.com/n0vella/tubesummary/llms.txt

Manages persistent settings using `chrome.storage.local` with cross-browser compatibility. Falls back to default settings if none are saved.

```typescript
// src/utils.ts

import { readSettings, storage } from './utils'

// Reading settings (falls back to defaults if unset):
const settings = await readSettings()
// settings: {
//   prompt: "Summarize the following video...\n---\n{transcription}",
//   endpoint: "",   // e.g. "https://openrouter.ai/api/v1/"
//   model: "",      // e.g. "mistralai/mistral-7b-instruct"
//   apiKey: ""      // e.g. "sk-or-v1-..."
// }

// Saving settings (from the settings page on form submit):
await storage.set({
  settings: {
    prompt: 'Summarize the following video based on its transcription.\n---\n{transcription}',
    endpoint: 'https://api.groq.com/openai/v1',
    model: 'llama3-8b-8192',
    apiKey: 'gsk_...',
  },
})
```

```json
// Default prompt template (src/default-settings.json):
// Uses {transcription} as the placeholder for the fetched transcript text.
// Instructs the model to write in the video author's voice, include memorable
// quotes in Markdown blockquote format, and justify claims with [Ns] timestamps.
const defaultPrompt = `Summarize the following video based on its transcription.
Return only the summary.
Write it in the same tone as the video, as if the author had adapted it to be much shorter.
Avoid using the third person.
> If you find a memorable quote, use it in markdown quote format into a new line.
Justify the summary using timestamps in format [<seconds>s] taked from transcription.
---
{transcription}`
```

--------------------------------

### Content Script Injection and SPA Navigation Handling

Source: https://context7.com/n0vella/tubesummary/llms.txt

This script handles DOM changes and YouTube SPA navigation by observing mutations, removing old summary panels, and rendering a new App component. It disconnects the observer once the target element is found.

```typescript
// src/main.tsx

// The observer watches for DOM changes on the full document body:
const observer = new MutationObserver(main)
observer.observe(document.body, { childList: true, subtree: true })

async function main() {
  const dotButton = await awaitElement('#button-shape') as HTMLDivElement
  observer.disconnect() // stop watching once the toolbar is found

  // Remove any stale panel from a previous page load:
  document.querySelector('#TubeSummary')?.remove()

  const container = document.createElement('div')
  dotButton.insertAdjacentElement('afterend', container)
  render(<App />, container) // mounts the Brain button toggle
}

// App.tsx: the Brain button toggles the SummaryPanel mount/unmount
// Middle-click on the Brain button opens the settings page in a new tab
// yt-navigate-finish event closes the panel on YouTube SPA navigation
```

--------------------------------

### DOM Injection Helper with MutationObserver

Source: https://context7.com/n0vella/tubesummary/llms.txt

A utility function that waits for a specific DOM element to appear using `MutationObserver`. Essential for content scripts in SPAs like YouTube where elements may not be present on initial load.

```typescript
// src/utils.ts

import { awaitElement } from './utils'

// Used in main.tsx to wait for the YouTube toolbar button container before injecting the App:
async function main() {
  // Blocks until '#button-shape' appears in the DOM (YouTube SPA navigation-safe)
  const dotButton = await awaitElement('#button-shape') as HTMLDivElement

  // After resolution, insert the TubeSummary button container adjacent to the dot-menu:
  const container = document.createElement('div')
  dotButton.insertAdjacentElement('afterend', container)

  render(<App />, container)
}

// Also used implicitly: the MutationObserver in main.tsx re-runs main() on each
// YouTube navigation event (yt-navigate-finish) to re-inject after page transitions.
```

--------------------------------

### Manage Streaming Chat Session with Preact Hook

Source: https://context7.com/n0vella/tubesummary/llms.txt

A Preact hook that manages chat sessions, including fetching transcripts, handling LLM responses, and user messages. It automatically converts timestamps in LLM output to clickable seek links and surfaces errors.

```typescript
// src/modules/chat.ts

import { useChat } from './modules/chat'

function SummaryPanel() {
  const [chat, ask, isResponding] = useChat()
  // On mount, useChat() automatically:
  //   1. Calls getTranscript() to fetch captions
  //   2. Reads settings from storage (apiKey, endpoint, model, prompt)
  //   3. Sends { action: 'loadModelResponse', messages } to background service worker
  //   4. Listens for streaming 'modelChunk' messages to update chat state
  //   5. Sets isResponding=false on 'modelEnd' message

  // Sending a follow-up question:
  function handleUserQuestion(question: string) {
    // Appends { role: 'user', content: question } to chat and re-triggers the background worker
    ask(question)
  }

  // Timestamp conversion — happens automatically inside useChat:
  // LLM output "[42s]" → "[[0:42]](/watch?v=VIDEO_ID&t=42)"
  // Clicking this link in the rendered panel seeks the video to that time.

  // Error states are surfaced as { role: 'error', content: errorMessage }
  // e.g. if apiKey is not set: "You must configure a provider first"
  // e.g. if prompt lacks {transcription}: 'Prompt must contain "{transcription}" flag'

  return <div>{chat.map(msg => <div>{msg.content}</div>)}
</div>
}

```

--------------------------------

### Fetch YouTube Video Transcript

Source: https://context7.com/n0vella/tubesummary/llms.txt

Fetches the full transcript of the currently playing YouTube video. It requires being on a YouTube watch page and handles cases where captions might be unavailable. The transcript includes `[Ns]` timestamp markers.

```typescript
// src/modules/youtube.ts

// Called automatically when the summary panel mounts.
// Extracts video ID from the URL, calls the Innertube API, and parses caption XML.

import { getTranscript } from './modules/youtube'

async function example() {
  // Must be called from within a YouTube watch page (window.location contains ?v=VIDEO_ID)
  try {
    const transcript = await getTranscript()
    // transcript is a plain string with embedded timestamps, e.g.:
    // "[0s]\nWelcome to this video.\n[5s]\nToday we cover...\n"
    console.log(transcript)
  } catch (e) {
    // Throws a descriptive string if video ID is missing or captions are unavailable
    console.error(e) // e.g. "Looks like this video doesn't have captions or we had trouble fetching them"
  }
}

// Internal fetch — for reference only (called inside getTranscript):
// POST https://www.youtube.com/youtubei/v1/player?key=<INNERTUBE_API_KEY>
// Body: { context: { client: { clientName: 'ANDROID', clientVersion: '20.10.38' } }, videoId: "dQw4w9WgXcQ" }
// The INNERTUBE_API_KEY is scraped from the YouTube page's HTML at runtime.

```

--------------------------------

### Background Service Worker Message Handling

Source: https://context7.com/n0vella/tubesummary/llms.txt

Handles messages from content scripts and settings pages for LLM streaming, model listing, and opening settings. It avoids CORS issues by making API calls directly.

```typescript
// src/background/background.ts — message protocol reference

// --- Content Script → Background ---
// Trigger a streaming LLM completion:
await chrome.runtime.sendMessage({
  action: 'loadModelResponse',
  messages: [
    { role: 'system', content: 'Summarize the following video...\n---\n[0s]\nHello world...' },
    // Optionally include prior user/assistant turns for Q&A continuations:
    { role: 'assistant', content: 'This video covers...' },
    { role: 'user', content: 'What was the main takeaway?' },
  ],
})

// --- Background → Content Script Tab (streaming) ---
// Background sends these to the tab while streaming:
// { action: 'modelChunk', messages: [...originalMessages], text: '<accumulated text so far>' }
// { action: 'modelEnd' }       // signals completion
// { action: 'error', errorText: 'Model not found' }  // on failure

// --- Settings Page → Background ---
// Fetch available models for a given provider:
const models = await chrome.runtime.sendMessage({
  action: 'listModels',
  endpoint: 'https://openrouter.ai/api/v1/',
  apiKey: 'sk-or-...', 
})
// Returns: OpenAI Model[] array, e.g. [{ id: 'mistralai/mistral-7b-instruct', ... }, ...]

// --- Extension icon click (no message needed) ---
// chrome.action.onClicked opens the settings page automatically.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.