diff --git a/examples/chrome-extension-webgpu-service-worker/src/content.js b/examples/chrome-extension-webgpu-service-worker/src/content.js index 86dab0720..00d54d73c 100644 --- a/examples/chrome-extension-webgpu-service-worker/src/content.js +++ b/examples/chrome-extension-webgpu-service-worker/src/content.js @@ -1,6 +1,6 @@ // Only the content script is able to access the DOM chrome.runtime.onConnect.addListener(function (port) { port.onMessage.addListener(function (msg) { - port.postMessage({ contents: document.body.innerHTML }); + port.postMessage({ contents: document.body.innerText }); }); }); diff --git a/examples/chrome-extension-webgpu-service-worker/src/manifest.json b/examples/chrome-extension-webgpu-service-worker/src/manifest.json old mode 100644 new mode 100755 index a4b4318c4..91dc5e3e3 --- a/examples/chrome-extension-webgpu-service-worker/src/manifest.json +++ b/examples/chrome-extension-webgpu-service-worker/src/manifest.json @@ -10,7 +10,7 @@ "128": "icons/icon-128.png" }, "content_security_policy": { - "extension_pages": "style-src-elem 'self' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com; script-src 'self' 'wasm-unsafe-eval'; default-src 'self' data:; connect-src 'self' data: http://localhost:8000 https://huggingface.co https://cdn-lfs.huggingface.co https://cdn-lfs-us-1.huggingface.co https://raw.githubusercontent.com https://cdn-lfs-us-1.hf.co" + "extension_pages": "style-src-elem 'self' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com; script-src 'self' 'wasm-unsafe-eval'; default-src 'self' data:; connect-src 'self' data: https://cas-bridge.xethub.hf.co http://localhost:8000 https://huggingface.co https://cdn-lfs.huggingface.co https://cdn-lfs-us-1.huggingface.co https://raw.githubusercontent.com https://cdn-lfs-us-1.hf.co" }, "action": { "default_title": "MLCBot", diff --git a/examples/chrome-extension-webgpu-service-worker/src/popup.ts b/examples/chrome-extension-webgpu-service-worker/src/popup.ts old mode 100644 new mode 100755 index 2dbcb5b7d..06b040717 --- a/examples/chrome-extension-webgpu-service-worker/src/popup.ts +++ b/examples/chrome-extension-webgpu-service-worker/src/popup.ts @@ -15,13 +15,15 @@ import { ProgressBar, Line } from "progressbar.js"; /***************** UI elements *****************/ // Whether or not to use the content from the active tab as the context -const useContext = false; +const useContext = true; +console.log('useContext value:', useContext); const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); const queryInput = document.getElementById("query-input")!; const submitButton = document.getElementById("submit-button")!; let isLoadingParams = false; +let pageContext = ""; // Store the page context (submitButton).disabled = true; @@ -89,7 +91,7 @@ async function handleClick() { const message = (queryInput).value; console.log("message", message); chatHistory.push({ role: "user", content: message }); - + console.log(chatHistory) // Clear the answer document.getElementById("answer")!.innerHTML = ""; // Hide the answer @@ -147,21 +149,81 @@ function updateAnswer(answer: string) { } function fetchPageContents() { - chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) { - if (tabs[0]?.id) { - const port = chrome.tabs.connect(tabs[0].id, { name: "channelName" }); - port.postMessage({}); - port.onMessage.addListener(function (msg) { - console.log("Page contents:", msg.contents); - chrome.runtime.sendMessage({ context: msg.contents }); - }); - } + // Query all tabs in the current window instead of just the active one + chrome.tabs.query({ currentWindow: true }, function (tabs) { + const allTabContents: { title: string; url: string; content: string }[] = []; + let completedTabs = 0; + + if (tabs.length === 0) return; + + tabs.forEach((tab) => { + if (tab.id) { + try { + const port = chrome.tabs.connect(tab.id, { name: "channelName" }); + port.postMessage({}); + port.onMessage.addListener(function (msg) { + // Store each tab's content with metadata + allTabContents.push({ + title: tab.title || "Untitled", + url: tab.url || "Unknown URL", + content: msg.contents + }); + + completedTabs++; + + // When all tabs have been processed + if (completedTabs === tabs.length) { + // Combine all tab contents into a single context + pageContext = allTabContents + .map((tabInfo, index) => + `=== Tab ${index + 1}: ${tabInfo.title} ===\nURL: ${tabInfo.url}\n\n${tabInfo.content}\n\n` + ) + .join("\n"); + + // Add page context to chat history as a system message + if (pageContext && chatHistory.length === 0) { + chatHistory.push({ + role: "system", + content: `You are a helpful assistant. Here is the content of all ${tabs.length} tabs currently open in the browser:\n\n${pageContext}\n\nPlease answer questions about these webpages based on the content provided above.` + }); + console.log("content",pageContext); + } + } + }); + + // Handle connection errors (e.g., for chrome:// pages or pages without content script) + port.onDisconnect.addListener(() => { + completedTabs++; + if (completedTabs === tabs.length && chatHistory.length === 0 && pageContext) { + chatHistory.push({ + role: "system", + content: `You are a helpful assistant. Here is the content of all ${allTabContents.length} accessible tabs currently open in the browser:\n\n${pageContext}\n\nPlease answer questions about these webpages based on the content provided above.` + }); + // console.log("content",pageContext); + } + }); + } catch (error) { + console.error(`Failed to connect to tab ${tab.id}:`, error); + completedTabs++; + } + } else { + completedTabs++; + } + }); }); } // Grab the page contents when the popup is opened -window.onload = function () { +// Use DOMContentLoaded instead of window.onload to ensure it fires +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', function() { + if (useContext) { + fetchPageContents(); + } + }); +} else { + // Document already loaded if (useContext) { fetchPageContents(); } -}; +}