allow root scrollable

Author: jogibear9988

README.md

@@ -2,6 +2,8 @@
 
 A browser extension that exports any web page's rendered DOM to **10 output formats** using the [@node-projects/layout2vector](https://github.com/node-projects/layout2vector) library.
 
+Install the Chrome version from the [Chrome Web Store](https://chromewebstore.google.com/detail/web2vector/ojjkecepeobhmpilhdhcjcgpdjhnkjgl).
+
 <p align="center">
   <img src="src/icons/icon.svg" width="128" alt="Web2Vector icon" />
 </p>

package-lock.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@chenglou/pretext": "^0.0.6",
-    "@node-projects/layout2vector": "^5.18.0",
+    "@node-projects/layout2vector": "^5.19.0",
     "get-box-quads-polyfill": "^4.36.0"
   },
   "devDependencies": {

package.json

@@ -10,6 +10,9 @@ const popupPorts = new Set();
 const IMAGE_FETCH_TIMEOUT_MS = 12000;
 const FRAME_COLLECTION_TIMEOUT_MS = 45000;
 const PRECOMPUTED_IR_TRANSFER_MAX_BYTES = 8 * 1024 * 1024;
+const DEFAULT_EXPORT_OPTIONS = Object.freeze({
+  rootScrollBehavior: 'clip',
+});
 
 const FRAME_EXTRACTION_OPTIONS = {
   boxType: 'border',
@@ -53,7 +56,7 @@ extensionApi.runtime.onInstalled.addListener(() => {
 extensionApi.contextMenus.onClicked.addListener((info, tab) => {
   if (!info.menuItemId.startsWith('export-')) return;
   const format = info.menuItemId.slice('export-'.length);
-  startExport(tab.id, format);
+  startExport(tab.id, format, DEFAULT_EXPORT_OPTIONS);
 });
 
 extensionApi.runtime.onConnect?.addListener((port) => {
@@ -69,8 +72,9 @@ extensionApi.runtime.onConnect?.addListener((port) => {
 extensionApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
   // From popup: start an export
   if (message.action === 'export') {
+    const exportOptions = normalizeExportOptions(message.options);
     extensionApi.tabs.query({ active: true, currentWindow: true }).then(([tab]) => {
-      if (tab) startExport(tab.id, message.format);
+      if (tab) startExport(tab.id, message.format, exportOptions);
     });
     return;
   }
@@ -114,29 +118,36 @@ extensionApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
 });
 
 // ── Export orchestration ──────────────────────────────────
-async function startExport(tabId, format) {
+async function startExport(tabId, format, exportOptions = DEFAULT_EXPORT_OPTIONS) {
   const fmt = FORMATS[format];
   if (!fmt) {
     notifyPopup('export-error', { error: `Unknown format: ${format}` });
     return;
   }
 
   try {
-    const mergedIr = selectPrecomputedIrForTransfer(await collectMergedIrForTab(tabId));
+    const normalizedOptions = normalizeExportOptions(exportOptions);
+    const mergedIr = selectPrecomputedIrForTransfer(await collectMergedIrForTab(tabId, normalizedOptions));
 
     // 1. Set the requested format and precomputed IR in the content-script world
     await extensionApi.scripting.executeScript({
       target: { tabId },
-      func: (f, ir) => {
+      func: (f, ir, options) => {
         globalThis.__web2vector_format = f;
 
         if (Array.isArray(ir)) {
           globalThis.__web2vector_precomputed_ir = ir;
         } else {
           delete globalThis.__web2vector_precomputed_ir;
         }
+
+        if (options && typeof options === 'object') {
+          globalThis.__web2vector_export_options = options;
+        } else {
+          delete globalThis.__web2vector_export_options;
+        }
       },
-      args: [format, mergedIr],
+      args: [format, mergedIr, normalizedOptions],
     });
 
     // 2. Lazy-load writer bundle when required
@@ -162,7 +173,7 @@ async function startExport(tabId, format) {
   }
 }
 
-async function collectMergedIrForTab(tabId) {
+async function collectMergedIrForTab(tabId, exportOptions = DEFAULT_EXPORT_OPTIONS) {
   try {
     return await withTimeout((async () => {
       await extensionApi.scripting.executeScript({
@@ -178,7 +189,10 @@ async function collectMergedIrForTab(tabId) {
       const frameResults = await extensionApi.scripting.executeScript({
         target: { tabId, allFrames: true },
         func: (options) => globalThis.__web2vectorFrameSupport?.collectFrameData?.(options) ?? null,
-        args: [FRAME_EXTRACTION_OPTIONS],
+        args: [{
+          ...FRAME_EXTRACTION_OPTIONS,
+          rootScrollBehavior: normalizeExportOptions(exportOptions).rootScrollBehavior,
+        }],
       });
 
       return mergeFrameExtractionResults(frameResults, { rootFrameId: 0 })?.ir ?? null;
@@ -213,6 +227,12 @@ function estimateSerializedSize(value) {
   }
 }
 
+function normalizeExportOptions(options) {
+  return {
+    rootScrollBehavior: options?.rootScrollBehavior === 'expand' ? 'expand' : 'clip',
+  };
+}
+
 async function withTimeout(promise, timeoutMs, onTimeout) {
   let timeoutId = null;
 

src/background/service-worker.js

@@ -39,11 +39,12 @@ async function collectFrameData(options = {}) {
     includeSourceMetadata: options.includeSourceMetadata ?? true,
     includeInvisible: options.includeInvisible ?? false,
     walkIframes: false,
+    rootScrollBehavior: options.rootScrollBehavior ?? 'clip',
     convertFormControls: options.convertFormControls ?? true,
     includePseudoElements: options.includePseudoElements ?? true,
   };
 
-  const paintOrder = collectPaintOrder(root, extractOptions.includeInvisible ?? false, lib);
+  const paintOrder = collectPaintOrder(root, extractOptions, lib);
   const ir = await lib.extractIR(root, extractOptions);
   const childFrames = await collectChildFrameMappings(root, extractOptions.includeInvisible ?? false, lib);
 
@@ -55,12 +56,14 @@ async function collectFrameData(options = {}) {
   };
 }
 
-function collectPaintOrder(root, includeInvisible, lib) {
+function collectPaintOrder(root, extractOptions, lib) {
   if (typeof lib.traverseDOM !== 'function' || typeof lib.flattenStackingOrder !== 'function') {
     return [];
   }
 
-  const stackingTree = lib.traverseDOM(root, includeInvisible, false);
+  const stackingTree = lib.traverseDOM(root, extractOptions.includeInvisible ?? false, false, {
+    rootScrollBehavior: extractOptions.rootScrollBehavior,
+  });
   return lib.flattenStackingOrder(stackingTree).map((node) => getElementXPath(node.element));
 }
 

src/content/frame-support.js

@@ -1,7 +1,7 @@
 /**
  * Run-export script — injected each time the user requests an export.
  *
- * Reads the requested format from globalThis.__web2vector_format,
+ * Reads the requested format and export options from globalThis,
  * performs the export via layout2vector, converts the result to a
  * data-URL, and sends it to the background service worker which
  * triggers chrome.downloads.download({ saveAs: true }).
@@ -30,11 +30,13 @@ const PX_TO_MM = 25.4 / 96;
     const { extractIR, renderIR, writers } = lib;
 
     const root = document.documentElement;
+    const exportOptions = normalizeExportOptions(globalThis.__web2vector_export_options);
     const precomputedIr = Array.isArray(globalThis.__web2vector_precomputed_ir)
       ? globalThis.__web2vector_precomputed_ir
       : null;
 
     delete globalThis.__web2vector_precomputed_ir;
+    delete globalThis.__web2vector_export_options;
 
     const BITMAP_FORMATS = ['png', 'jpeg', 'webp'];
     const isBitmap = BITMAP_FORMATS.includes(format);
@@ -47,6 +49,7 @@ const PX_TO_MM = 25.4 / 96;
         includeImages,
         includeSourceMetadata: false,
         walkIframes: true,
+        rootScrollBehavior: exportOptions.rootScrollBehavior,
         convertFormControls: true,
       });
     }
@@ -361,3 +364,9 @@ function truncateForLog(value, maxLength = 240) {
   if (typeof value !== 'string' || value.length <= maxLength) return value ?? null;
   return `${value.slice(0, maxLength - 3)}...`;
 }
+
+function normalizeExportOptions(options) {
+  return {
+    rootScrollBehavior: options?.rootScrollBehavior === 'expand' ? 'expand' : 'clip',
+  };
+}

src/content/run-export.js

@@ -84,6 +84,35 @@ body {
   font-family: 'SFMono-Regular', Consolas, monospace;
 }
 
+/* ── Export options ── */
+.options-panel {
+  margin-top: 10px;
+  padding: 9px 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.option-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: #333;
+  cursor: pointer;
+}
+
+.option-toggle input {
+  margin-top: 1px;
+}
+
+.option-hint {
+  margin-top: 5px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: #777;
+}
+
 /* ── Status bar ── */
 .status {
   margin-top: 10px;

src/popup/popup.css

@@ -15,6 +15,14 @@ <h1>Web2Vector</h1>
 
     <div id="format-list" class="format-list"></div>
 
+    <div class="options-panel">
+      <label class="option-toggle" for="root-scroll-expand">
+        <input id="root-scroll-expand" type="checkbox">
+        <span>Expand root scroll content</span>
+      </label>
+      <p class="option-hint">Export the full page when the root uses scrollable overflow.</p>
+    </div>
+
     <div id="status" class="status hidden"></div>
   </div>
   <script src="popup.js"></script>

src/popup/popup.html

@@ -3,6 +3,7 @@ import { extensionApi } from '../shared/extension-api.js';
 import { POPUP_STATUS_PORT_NAME } from '../shared/popup-status.js';
 
 const list = document.getElementById('format-list');
+const rootScrollExpand = document.getElementById('root-scroll-expand');
 const status = document.getElementById('status');
 let statusPort = null;
 
@@ -36,37 +37,49 @@ for (const [cat, label] of Object.entries(CATEGORIES)) {
 // ── Export logic ──────────────────────────────────────────
 let exporting = false;
 
-function setButtons(enabled) {
+function setControlsEnabled(enabled) {
   for (const btn of list.querySelectorAll('.format-btn')) {
     btn.disabled = !enabled;
   }
+
+  rootScrollExpand.disabled = !enabled;
 }
 
 function showStatus(text, type) {
   status.textContent = text;
   status.className = `status ${type}`;
 }
 
+function getExportOptions() {
+  return {
+    rootScrollBehavior: rootScrollExpand.checked ? 'expand' : 'clip',
+  };
+}
+
 function startExport(format) {
   if (exporting) return;
   exporting = true;
-  setButtons(false);
+  setControlsEnabled(false);
   showStatus('Exporting\u2026', 'loading');
 
-  extensionApi.runtime.sendMessage({ action: 'export', format });
+  extensionApi.runtime.sendMessage({
+    action: 'export',
+    format,
+    options: getExportOptions(),
+  });
 }
 
 // ── Listen for result from background ─────────────────────
 function handleStatusMessage(msg) {
   if (msg.action === 'export-complete') {
     showStatus('Download started!', 'success');
     exporting = false;
-    setButtons(true);
+    setControlsEnabled(true);
   }
   if (msg.action === 'export-error') {
     showStatus(msg.error ?? 'Export failed', 'error');
     exporting = false;
-    setButtons(true);
+    setControlsEnabled(true);
   }
 }
 

src/popup/popup.js

@@ -96,6 +96,38 @@ describe('service-worker message handling', () => {
     }, { timeout: 2000 });
   });
 
+  it('passes root scroll expand through frame extraction and export setup', async () => {
+    await import('../src/background/service-worker.js');
+    chrome._listeners.onMessage?.({
+      action: 'export',
+      format: 'svg',
+      options: { rootScrollBehavior: 'expand' },
+    }, {});
+
+    await vi.waitFor(() => {
+      const frameCollectionCall = chrome.scripting.executeScript.mock.calls.find((call) =>
+        call[0]?.target?.allFrames === true
+        && typeof call[0]?.func === 'function'
+        && Array.isArray(call[0]?.args)
+        && call[0].args[0]?.boxType === 'border'
+      );
+
+      expect(frameCollectionCall).toBeTruthy();
+      expect(frameCollectionCall[0].args[0]).toEqual(expect.objectContaining({
+        rootScrollBehavior: 'expand',
+      }));
+
+      const exportSetupCall = chrome.scripting.executeScript.mock.calls.find((call) =>
+        typeof call[0]?.func === 'function'
+        && Array.isArray(call[0]?.args)
+        && call[0].args[0] === 'svg'
+      );
+
+      expect(exportSetupCall).toBeTruthy();
+      expect(exportSetupCall[0].args[2]).toEqual({ rootScrollBehavior: 'expand' });
+    }, { timeout: 2000 });
+  });
+
   it('skips transferring oversized precomputed IR back into the tab', async () => {
     const hugeDataUrl = `data:image/png;base64,${'A'.repeat(9 * 1024 * 1024)}`;
     chrome.scripting.executeScript.mockImplementation(async (config) => {