Large exports no longer go through one oversized runtime.sendMessage payload. src/content/run-export.js now streams the rendered file to the background in 4 MiB chunks over a runtime port, and src/background/service-worker.js reassembles those chunks into a Blob URL before calling downloads.download. That removes the 64 MiB cap the old base64 data URL path was hitting.

I also changed the bitmap fallback so one tainted remote image no longer causes all page images to disappear. src/content/run-export.js now drops only image nodes that are likely to taint the canvas, while keeping embedded, blob, and same-origin images. The filtering logic is covered in tests/export-utils.test.js, and the streamed download path is covered in tests/service-worker.test.js.

Validation passed: npm test and npm run build. Reload the unpacked extension so the rebuilt dist assets are used.

Cross-origin images that the browser refuses to expose are still a real platform limitation. With the current permissions, those can still be omitted in bitmap fallbacks or remain external in some vector/document outputs. If you want, the next step is to add optional broader host permissions and a background fetch path so the extension can try to embed more CDN-hosted images.

Removed the popup from the generic runtime.onMessage path again, leaving only the reconnecting dedicated status port, then rebuilt and reran the full test suite. That keeps the popup from competing with export transfer acknowledgements while still preserving status updates across service-worker restarts.

I removed the popup from generic runtime.onMessage handling again, so only the background can answer export transfer messages now. The popup still has the reconnecting dedicated status port, so it can receive export-complete / export-error updates without participating in the transfer ack path. I rebuilt the extension and reran npm test; the suite still passes.

Reload the unpacked extension again before retrying. If the Export transfer did not receive an acknowledgement error still appears after this reload, that strongly points away from the popup and toward the injected page-side sender or the service worker not handling the transfer message at all in real Chrome. At that point the next step will be to add explicit transfer-stage diagnostics in the popup/background so we can see whether it fails on export-transfer-start, first chunk, or complete.

Author: jogibear9988

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "web2vector-extension",
   "version": "1.0.0",
-  "description": "Browser extension to export web pages to SVG, DXF, DWG, EMF, PDF, HTML, PNG, JPEG, and WebP using layout2vector",
+  "description": "Export web pages as high-quality vector and image files directly from your browser. This extension uses layout2vector to convert page layouts into formats such as SVG, DXF, DWG, PDF and PNG, making it easy to reuse designs, archive content, or process graphics.",
   "private": true,
   "type": "module",
   "scripts": {
@@ -16,14 +16,15 @@
     "upload": "node scripts/upload-to-store.mjs"
   },
   "dependencies": {
-    "@node-projects/layout2vector": "^5.7.0",
-    "get-box-quads-polyfill": "^4.32.0"
+    "@chenglou/pretext": "^0.0.6",
+    "@node-projects/layout2vector": "^5.15.0",
+    "get-box-quads-polyfill": "^4.34.0"
   },
   "devDependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "archiver": "^7.0.1",
     "chrome-webstore-upload": "^4.0.3",
     "esbuild": "^0.28.0",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.5"
   }
 }

package.json

@@ -1,7 +1,11 @@
 import { FORMATS, CATEGORIES } from '../shared/formats.js';
 import { extensionApi } from '../shared/extension-api.js';
+import { base64ToBytes } from '../shared/export-transfer.js';
+import { POPUP_STATUS_PORT_NAME } from '../shared/popup-status.js';
 
 const pendingDownloadUrls = new Map();
+const pendingTransfers = new Map();
+const popupPorts = new Set();
 
 extensionApi.downloads.onChanged?.addListener((delta) => {
   const state = delta.state?.current;
@@ -38,23 +42,53 @@ extensionApi.contextMenus.onClicked.addListener((info, tab) => {
   startExport(tab.id, format);
 });
 
+extensionApi.runtime.onConnect?.addListener((port) => {
+  if (port.name !== POPUP_STATUS_PORT_NAME) return;
+
+  popupPorts.add(port);
+  port.onDisconnect.addListener(() => {
+    popupPorts.delete(port);
+  });
+});
+
 // ── Message handling ──────────────────────────────────────
-extensionApi.runtime.onMessage.addListener((message, sender) => {
+extensionApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
   // From popup: start an export
   if (message.action === 'export') {
     extensionApi.tabs.query({ active: true, currentWindow: true }).then(([tab]) => {
       if (tab) startExport(tab.id, message.format);
     });
+    return;
   }
 
   // From content script: export finished
-  if (message.type === 'export-result' && sender.tab) {
+  if (message.type === 'export-result') {
     handleResult(message);
+    return;
   }
 
   // From content script: export error
-  if (message.type === 'export-error' && sender.tab) {
+  if (message.type === 'export-error') {
     notifyPopup('export-error', { error: message.error });
+    sendResponse({ ok: true });
+    return;
+  }
+
+  if (message.type === 'export-transfer-start') {
+    sendResponse(handleTransferStart(message, sender));
+    return;
+  }
+
+  if (message.type === 'export-transfer-chunk') {
+    sendResponse(handleTransferChunk(message, sender));
+    return;
+  }
+
+  if (message.type === 'export-transfer-complete') {
+    void finalizeTransfer(message, sender)
+      .then((response) => sendResponse(response))
+      .catch((error) => sendResponse({ ok: false, error: error.message }));
+    return true;
   }
 });
 
@@ -128,6 +162,95 @@ async function handleResult({ dataUrl, filename }) {
   }
 }
 
+function handleTransferStart(message, sender) {
+  if (!message.transferId || typeof message.transferId !== 'string') {
+    return { ok: false, error: 'Missing export transfer id' };
+  }
+
+  pendingTransfers.set(getTransferKey(sender, message.transferId), {
+    filename: message.filename,
+    mime: message.mime || 'application/octet-stream',
+    expectedSize: message.size ?? null,
+    receivedSize: 0,
+    chunks: [],
+  });
+
+  return { ok: true };
+}
+
+function handleTransferChunk(message, sender) {
+  try {
+    const transfer = requireTransfer(message, sender);
+    const chunk = decodeExportChunk(message.chunkBase64);
+    transfer.chunks.push(chunk);
+    transfer.receivedSize += chunk.byteLength;
+    return { ok: true };
+  } catch (error) {
+    return { ok: false, error: error.message };
+  }
+}
+
+async function finalizeTransfer(message, sender) {
+  const transfer = requireTransfer(message, sender);
+  const transferKey = getTransferKey(sender, message.transferId);
+
+  try {
+    if (transfer.expectedSize !== null && transfer.receivedSize !== transfer.expectedSize) {
+      throw new Error('Export stream ended before all bytes were received');
+    }
+
+    const blob = new Blob(transfer.chunks, { type: transfer.mime });
+    void handleResultBlob(blob, transfer.filename).catch(() => {});
+    return { ok: true };
+  } finally {
+    pendingTransfers.delete(transferKey);
+  }
+}
+
+async function handleResultBlob(blob, filename) {
+  let objectUrl = null;
+
+  try {
+    const downloadTarget = await createDownloadTargetFromBlob(blob);
+    objectUrl = downloadTarget.objectUrl;
+    const downloadId = await extensionApi.downloads.download({
+      url: downloadTarget.url,
+      filename,
+      saveAs: true,
+    });
+
+    if (objectUrl !== null) {
+      pendingDownloadUrls.set(downloadId, objectUrl);
+    }
+
+    notifyPopup('export-complete');
+  } catch (err) {
+    if (objectUrl !== null) {
+      URL.revokeObjectURL(objectUrl);
+    }
+
+    notifyPopup('export-error', { error: err.message });
+    throw err;
+  }
+}
+
+async function createDownloadTargetFromBlob(blob) {
+  if (shouldUseObjectUrlForBlobDownload()) {
+    const objectUrl = URL.createObjectURL(blob);
+    return { url: objectUrl, objectUrl };
+  }
+
+  return {
+    url: await blobToDataUrl(blob),
+    objectUrl: null,
+  };
+}
+
+function shouldUseObjectUrlForBlobDownload() {
+  return extensionApi === globalThis.browser &&
+    typeof URL.createObjectURL === 'function';
+}
+
 function createDownloadObjectUrl(dataUrl) {
   if (!shouldUseObjectUrlForDownload(dataUrl)) return null;
   return URL.createObjectURL(dataUrlToBlob(dataUrl));
@@ -160,7 +283,64 @@ function dataUrlToBlob(dataUrl) {
   return new Blob([bytes], { type: mime });
 }
 
+async function blobToDataUrl(blob) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  const base64 = bytesToBase64(bytes);
+  return `data:${blob.type || 'application/octet-stream'};base64,${base64}`;
+}
+
+function bytesToBase64(bytes) {
+  const chunkSize = 0x8000;
+  let binary = '';
+
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    const chunk = bytes.subarray(offset, offset + chunkSize);
+    binary += String.fromCharCode(...chunk);
+  }
+
+  return btoa(binary);
+}
+
+function decodeExportChunk(chunkBase64) {
+  if (typeof chunkBase64 !== 'string' || chunkBase64.length === 0) {
+    throw new Error('Invalid export chunk payload');
+  }
+
+  return base64ToBytes(chunkBase64);
+}
+
+function requireTransfer(message, sender) {
+  const transferId = message?.transferId;
+  if (!transferId || typeof transferId !== 'string') {
+    throw new Error('Missing export transfer id');
+  }
+
+  const transfer = pendingTransfers.get(getTransferKey(sender, transferId));
+  if (!transfer) {
+    throw new Error('Export stream was not initialized');
+  }
+
+  return transfer;
+}
+
+function getTransferKey(sender, transferId) {
+  const tabId = sender.tab?.id ?? 'no-tab';
+  const frameId = sender.frameId ?? 0;
+  const documentId = sender.documentId ?? 'no-document';
+  return `${tabId}:${frameId}:${documentId}:${transferId}`;
+}
+
 // ── Notify popup (best-effort – popup may be closed) ──────
 function notifyPopup(action, extra = {}) {
-  extensionApi.runtime.sendMessage({ action, ...extra }).catch(() => {});
+  const message = { action, ...extra };
+
+  for (const port of popupPorts) {
+    try {
+      port.postMessage(message);
+    } catch {
+      popupPorts.delete(port);
+    }
+  }
+
+  extensionApi.runtime.sendMessage(message).catch(() => {});
 }

src/background/service-worker.js

@@ -0,0 +1,27 @@
+export function createExportBlob(data, mime) {
+  const bytes = data instanceof Uint8Array ? data : new TextEncoder().encode(data);
+  return new Blob([bytes], { type: mime });
+}
+
+export function stripPotentiallyTaintedImages(irNodes, options = {}) {
+  const baseUrl = options.baseUrl ?? globalThis.document?.baseURI ?? globalThis.location?.href;
+  const pageOrigin = options.pageOrigin ?? globalThis.location?.origin ?? null;
+
+  return irNodes.filter((node) => {
+    if (node?.type !== 'image') return true;
+    return isLikelyCanvasSafeImageSource(node.dataUrl, { baseUrl, pageOrigin });
+  });
+}
+
+export function isLikelyCanvasSafeImageSource(source, options = {}) {
+  if (typeof source !== 'string' || source.length === 0) return false;
+  if (source.startsWith('data:') || source.startsWith('blob:')) return true;
+
+  try {
+    const url = new URL(source, options.baseUrl);
+    if (!options.pageOrigin) return false;
+    return url.origin === options.pageOrigin;
+  } catch {
+    return false;
+  }
+}