feat(extension): bypass CORS for cross-origin images during export via background fetch

Author: lcomplete

app/extension/public/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "options_ui": {
     "page": "options.html",
     "open_in_tab": true

app/extension/src/background.ts

@@ -50,6 +50,27 @@ const badgeCache = new Map<number, string>();
 const SAVED_BADGE_TEXT = "✓";
 const SAVED_BADGE_BG = "#15803D";
 
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  const chunkSize = 0x8000;
+  let binary = "";
+
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    const chunk = bytes.subarray(index, index + chunkSize);
+    binary += String.fromCharCode(...chunk);
+  }
+
+  return btoa(binary);
+}
+
+async function blobToDataUrl(blob: Blob): Promise<string> {
+  const contentType = blob.type || "application/octet-stream";
+  const buffer = await blob.arrayBuffer();
+  const base64 = arrayBufferToBase64(buffer);
+
+  return `data:${contentType};base64,${base64}`;
+}
+
 /**
  * Update the badge for a tab based on whether the page is saved in Huntly
  * @param tabId The tab ID to update
@@ -583,6 +604,34 @@ chrome.runtime.onMessage.addListener(function (
     if (url) {
       chrome.tabs.create({ url });
     }
+  } else if ((msg as any).type === "fetch_image") {
+    // Fetch a cross-origin image from the background (privileged context)
+    // and return it as a data URL for export.
+    const imageUrl = msg.payload?.url;
+    if (!imageUrl) {
+      sendResponse({ success: false, error: "No URL provided" });
+      return;
+    }
+    (async () => {
+      try {
+        const response = await fetch(imageUrl, { credentials: "omit" });
+        if (!response.ok) {
+          sendResponse({ success: false, error: `HTTP ${response.status}` });
+          return;
+        }
+        const contentType = response.headers.get("content-type") || "";
+        if (!contentType.startsWith("image/")) {
+          sendResponse({ success: false, error: "Not an image" });
+          return;
+        }
+        const blob = await response.blob();
+        const dataUrl = await blobToDataUrl(blob);
+        sendResponse({ success: true, dataUrl });
+      } catch (error) {
+        sendResponse({ success: false, error: (error as Error)?.message || "Fetch failed" });
+      }
+    })();
+    return true; // Keep the message channel open for async response
   } else if ((msg as any).type === "badge_refresh") {
     // Refresh badge for a specific tab after manual save/delete from popup
     const tabId = msg.payload?.tabId;

app/extension/src/model.d.ts

@@ -26,7 +26,7 @@ interface ShortcutPayload {
 }
 
 interface Message {
-  type: "auto_save_clipper" | "save_clipper" | 'tab_complete' | 'auto_save_tweets' | 'read_tweet' | 'parse_doc' | 'save_clipper_success' | 'shortcuts_preview' | 'shortcuts_execute' | 'shortcuts_process' | 'shortcuts_cancel' | 'shortcuts_processing_start' | 'shortcuts_process_result' | 'shortcuts_process_data' | 'shortcuts_process_error' | 'get_selection' | 'detect_rss_feed' | 'get_huntly_shortcuts' | 'get_ai_toolbar_data' | 'open_tab' | 'save_detail_init' | 'http_proxy' | 'badge_refresh',
+  type: "auto_save_clipper" | "save_clipper" | 'tab_complete' | 'auto_save_tweets' | 'read_tweet' | 'parse_doc' | 'save_clipper_success' | 'shortcuts_preview' | 'shortcuts_execute' | 'shortcuts_process' | 'shortcuts_cancel' | 'shortcuts_processing_start' | 'shortcuts_process_result' | 'shortcuts_process_data' | 'shortcuts_process_error' | 'get_selection' | 'detect_rss_feed' | 'get_huntly_shortcuts' | 'get_ai_toolbar_data' | 'open_tab' | 'save_detail_init' | 'http_proxy' | 'badge_refresh' | 'fetch_image',
   payload?: any,
   url?: string
 }

app/extension/src/utils/exportUtils.ts

@@ -557,6 +557,13 @@ function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
     try {
       canvas.toBlob((blob) => {
         if (!blob) {
+          try {
+            canvas.toDataURL("image/png");
+          } catch (error) {
+            reject(error);
+            return;
+          }
+
           reject(new Error("Failed to create image blob"));
           return;
         }
@@ -569,6 +576,101 @@ function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
   });
 }
 
+/**
+ * Fetch an image via the background service worker (privileged context)
+ * which bypasses CORS restrictions that apply to content scripts in MV3.
+ */
+function fetchImageViaBackground(imageUrl: string): Promise<string | null> {
+  return new Promise((resolve) => {
+    try {
+      chrome.runtime.sendMessage(
+        { type: "fetch_image", payload: { url: imageUrl } },
+        (response) => {
+          if (chrome.runtime.lastError || !response?.success) {
+            resolve(null);
+            return;
+          }
+          resolve(response.dataUrl);
+        }
+      );
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+/**
+ * Convert export-unsafe images to data URLs using the background service
+ * worker's privileged fetch. This covers both explicit cross-origin images
+ * and same-origin URLs that redirect to a different origin at load time,
+ * such as GitHub's /raw/ image routes.
+ */
+async function convertCrossOriginImages(
+  originalRoot: HTMLElement,
+  clonedRoot: HTMLElement,
+  sourceOrigin: string,
+  baseUri: string
+): Promise<void> {
+  const originalImages = collectElements<HTMLImageElement>(originalRoot, "img");
+  const clonedImages = collectElements<HTMLImageElement>(clonedRoot, "img");
+  const pairCount = Math.min(originalImages.length, clonedImages.length);
+
+  const conversions = Array.from({ length: pairCount }, async (_, index) => {
+    const originalImage = originalImages[index];
+    const clonedImage = clonedImages[index];
+    const src =
+      clonedImage.getAttribute("src") ||
+      originalImage.currentSrc ||
+      originalImage.getAttribute("src");
+    if (!src) return;
+
+    const url = parseExportResourceUrl(src, baseUri);
+    if (!url) return;
+
+    // Skip non-HTTP URLs – data:, blob:, extension: are already safe.
+    if (url.protocol !== "http:" && url.protocol !== "https:") return;
+
+    const imageLoaded = Boolean(
+      originalImage.complete &&
+        originalImage.naturalWidth > 0 &&
+        originalImage.naturalHeight > 0
+    );
+
+    if (imageLoaded && isImageExportSafe(originalImage)) {
+      return;
+    }
+
+    // Avoid fetching ordinary same-origin images that simply haven't loaded
+    // yet. If the already-loaded image is still unsafe, fetch it regardless
+    // of origin to handle redirecting asset URLs.
+    if (!imageLoaded && url.origin === sourceOrigin) {
+      return;
+    }
+
+    try {
+      const dataUrl = await fetchImageViaBackground(url.href);
+      if (!dataUrl) return;
+
+      clonedImage.src = dataUrl;
+
+      // Clear srcset / <picture> <source>s so the browser uses the data URL.
+      if (clonedImage.srcset) {
+        clonedImage.removeAttribute("srcset");
+      }
+      if (clonedImage.parentElement instanceof HTMLPictureElement) {
+        clonedImage.parentElement
+          .querySelectorAll("source")
+          .forEach((sourceNode) => sourceNode.remove());
+      }
+    } catch {
+      // Fetch failed – leave the original src; the existing sanitize
+      // fallback will replace it with a placeholder if needed.
+    }
+  });
+
+  await Promise.all(conversions);
+}
+
 function waitForNextPaint(targetDocument: Document): Promise<void> {
   const view = targetDocument.defaultView;
 
@@ -846,6 +948,19 @@ export async function elementToCanvas(
   try {
     const targetDocument = exportRoot.ownerDocument;
     const sourceDocument = element.ownerDocument;
+    const sourceOrigin =
+      sourceDocument.location?.origin || window.location.origin;
+    const sourceBaseUri = sourceDocument.baseURI;
+
+    // Convert export-unsafe images to data URLs before html2canvas runs so
+    // they can be rendered without tainting the canvas.
+    await convertCrossOriginImages(
+      element,
+      exportRoot,
+      sourceOrigin,
+      sourceBaseUri
+    );
+
     await waitForStylesheets(targetDocument);
     await copyFontFaces(sourceDocument, targetDocument);
     await waitForFonts(targetDocument);