Add streaming support for API responses · ellioth.co/summarizer-extension@fb3678e

+67 -11

popup/popup.css

······

+251 -64

popup/popup.js

······························

+222

scripts/background.js

··· 120 120 return true; // Keep channel open for async 121 121 } 122 122 123 + if (request.action === "streamChat") { 124 + const { tabId } = request; 125 + handleStreamChatRequest(request.data, tabId) 126 + .catch((error) => { 127 + console.error("Stream chat error:", error); 128 + chrome.tabs.sendMessage(tabId, { 129 + action: "streamDone", 130 + error: error.message, 131 + }); 132 + }); 133 + return false; // We handle the response ourselves via sendMessage to tab 134 + } 135 + 123 136 if (request.action === "testOllama") { 124 137 testOllamaConnection() 125 138 .then(() => sendResponse({ success: true })) ··· 146 159 return await callOllamaNative(apiBaseUrl, model, messages, disableThinking); 147 160 } else { 148 161 return await callOpenAICompatible(apiBaseUrl, model, apiKey, messages); 162 + } 163 + } 164 + 165 + async function handleStreamChatRequest(data, tabId) { 166 + const { apiBaseUrl, model, apiKey, messages, apiMode, disableThinking } = data; 167 + 168 + let useNativeOllama = apiMode === "ollama"; 169 + 170 + if (useNativeOllama) { 171 + await callOllamaNativeStream(apiBaseUrl, model, messages, disableThinking, tabId); 172 + } else { 173 + await callOpenAICompatibleStream(apiBaseUrl, model, apiKey, messages, tabId); 149 174 } 150 175 } 151 176 ··· 282 307 283 308 return await response.json(); 284 309 } 310 + 311 + async function callOllamaNativeStream(baseUrl, model, messages, disableThinking, tabId) { 312 + const systemMsgs = messages.filter((m) => m.role === "system"); 313 + const systemContent = systemMsgs.map((m) => m.content).join("\n\n"); 314 + const otherMessages = messages.filter((m) => m.role !== "system"); 315 + const lastUserMsg = otherMessages.filter((m) => m.role === "user").pop(); 316 + 317 + let prompt; 318 + if (otherMessages.length > 1) { 319 + const context = otherMessages 320 + .slice(0, -1) 321 + .map((m) => `${m.role}: ${m.content}`) 322 + .join("\n"); 323 + prompt = OLLAMA_CONTEXT_TEMPLATE 324 + .replace("${context}", context) 325 + .replace("${userMessage}", lastUserMsg?.content || ""); 326 + } else { 327 + prompt = lastUserMsg?.content || ""; 328 + } 329 + 330 + const url = baseUrl.replace(/\/$/, "") + "/api/generate"; 331 + 332 + const requestBody = { 333 + model: model, 334 + prompt: prompt, 335 + system: systemContent, 336 + stream: true, 337 + options: { 338 + temperature: 0.7, 339 + num_predict: 2048, 340 + }, 341 + }; 342 + 343 + if (disableThinking === true) { 344 + requestBody.think = false; 345 + } 346 + 347 + try { 348 + const response = await fetch(url, { 349 + method: "POST", 350 + headers: { 351 + "Content-Type": "application/json", 352 + }, 353 + body: JSON.stringify(requestBody), 354 + }); 355 + 356 + if (!response.ok) { 357 + const text = await response.text(); 358 + let errorMsg = `HTTP ${response.status}`; 359 + if (response.status === 403) { 360 + errorMsg = "403 Forbidden. Ollama is rejecting the request origin. Fix: restart Ollama with OLLAMA_ORIGINS=* (e.g. OLLAMA_ORIGINS=* ollama serve)."; 361 + } else { 362 + try { 363 + const err = JSON.parse(text); 364 + errorMsg = err.error || err.message || errorMsg; 365 + } catch (e) { 366 + errorMsg = text || errorMsg; 367 + } 368 + } 369 + throw new Error(errorMsg); 370 + } 371 + 372 + const reader = response.body.getReader(); 373 + const decoder = new TextDecoder(); 374 + let buffer = ""; 375 + 376 + while (true) { 377 + const { done, value } = await reader.read(); 378 + if (done) break; 379 + 380 + buffer += decoder.decode(value, { stream: true }); 381 + const lines = buffer.split("\n"); 382 + buffer = lines.pop() || ""; 383 + 384 + for (const line of lines) { 385 + if (line.trim()) { 386 + try { 387 + const json = JSON.parse(line); 388 + if (json.response) { 389 + chrome.runtime.sendMessage({ 390 + action: "streamChunk", 391 + chunk: json.response, 392 + done: false, 393 + }).catch(() => {}); 394 + } 395 + } catch (e) { 396 + // Skip invalid JSON lines 397 + } 398 + } 399 + } 400 + } 401 + 402 + // Streaming complete - send done message 403 + chrome.runtime.sendMessage({ 404 + action: "streamDone", 405 + }).catch(() => {}); 406 + 407 + } catch (error) { 408 + chrome.runtime.sendMessage({ 409 + action: "streamDone", 410 + error: error.message, 411 + }).catch(() => {}); 412 + } 413 + } 414 + 415 + async function callOpenAICompatibleStream(baseUrl, model, apiKey, messages, tabId) { 416 + let url = baseUrl.replace(/\/$/, ""); 417 + 418 + if (!url.includes("/v1")) { 419 + url = url + "/v1"; 420 + } 421 + 422 + url = url + "/chat/completions"; 423 + 424 + try { 425 + const response = await fetch(url, { 426 + method: "POST", 427 + headers: { 428 + "Content-Type": "application/json", 429 + ...(apiKey && { Authorization: `Bearer ${apiKey}` }), 430 + }, 431 + body: JSON.stringify({ 432 + model: model, 433 + messages: messages, 434 + stream: true, 435 + max_tokens: 2048, 436 + }), 437 + }); 438 + 439 + if (!response.ok) { 440 + const text = await response.text(); 441 + let errorMsg = `HTTP ${response.status}`; 442 + 443 + if (response.status === 403) { 444 + if (url.includes("/v1")) { 445 + errorMsg = "403 Forbidden. This often means: invalid API key, API key lacks permissions, or the server rejected the request origin."; 446 + } else { 447 + errorMsg = "403 Forbidden. If using Ollama, ensure it's running with: ollama serve"; 448 + } 449 + } else if (response.status === 405) { 450 + errorMsg = "405 Method not allowed. Check if the API URL is correct for your API mode (Native vs OpenAI-compatible)."; 451 + } else { 452 + try { 453 + const err = JSON.parse(text); 454 + errorMsg = err.error?.message || err.message || errorMsg; 455 + } catch (e) { 456 + errorMsg = text || errorMsg; 457 + } 458 + } 459 + throw new Error(errorMsg); 460 + } 461 + 462 + const reader = response.body.getReader(); 463 + const decoder = new TextDecoder(); 464 + let buffer = ""; 465 + 466 + while (true) { 467 + const { done, value } = await reader.read(); 468 + if (done) break; 469 + 470 + buffer += decoder.decode(value, { stream: true }); 471 + const lines = buffer.split("\n"); 472 + buffer = lines.pop() || ""; 473 + 474 + for (const line of lines) { 475 + if (line.trim() && line.startsWith("data: ")) { 476 + const data = line.slice(6); 477 + if (data === "[DONE]") continue; 478 + try { 479 + const json = JSON.parse(data); 480 + const content = json.choices?.[0]?.delta?.content; 481 + if (content) { 482 + chrome.runtime.sendMessage({ 483 + action: "streamChunk", 484 + chunk: content, 485 + done: false, 486 + }).catch(() => {}); 487 + } 488 + } catch (e) { 489 + // Skip invalid JSON lines 490 + } 491 + } 492 + } 493 + } 494 + 495 + // Streaming complete - send done message 496 + chrome.runtime.sendMessage({ 497 + action: "streamDone", 498 + }).catch(() => {}); 499 + 500 + } catch (error) { 501 + chrome.runtime.sendMessage({ 502 + action: "streamDone", 503 + error: error.message, 504 + }).catch(() => {}); 505 + } 506 + }

Configure Feed

Configure Feed