Skip to content

vm0-ai/freeze-dry-bundle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 

Repository files navigation

freeze-dry-bundle

Prebuilt browser bundle of freeze-dry (v1.0.0) for injecting into browser contexts via CDP or automation tools like agent-browser.

freeze-dry snapshots a live web page into a single, self-contained HTML file with all CSS inlined and images embedded as data URIs. It runs inside the browser context, so it captures the DOM after JavaScript execution — making it ideal for SPAs with CSS-in-JS (Emotion, styled-components, etc.).

The upstream package does not ship a prebuilt browser bundle, so this repo provides one.

Usage

With agent-browser

# 1. Navigate to the page (already authenticated)
agent-browser open https://app.example.com/page

# 2. Inject the bundle
cat freeze-dry-bundle.js | agent-browser eval --stdin

# 3. Capture snapshot and trigger download
agent-browser eval --stdin <<'EOF'
(async () => {
  const html = await window.freezeDry(document);
  const blob = new Blob([html], { type: 'text/html' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'snapshot.html';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
})();
EOF

With Puppeteer / Playwright

const fs = require('fs');
const bundle = fs.readFileSync('freeze-dry-bundle.js', 'utf-8');

// Inject into page
await page.evaluate(bundle);

// Capture snapshot
const html = await page.evaluate(async () => {
  return await window.freezeDry(document);
});

fs.writeFileSync('snapshot.html', html);

How this bundle was built

mkdir fd-build && cd fd-build
npm init -y
npm install freeze-dry util

cat > entry.js <<'EOF'
window.process = { env: {}, version: 'v16.0.0', versions: {} };
const { freezeDry } = require("freeze-dry");
window.freezeDry = freezeDry;
EOF

npx esbuild entry.js \
  --bundle \
  --format=iife \
  --outfile=freeze-dry-bundle.js \
  --platform=browser \
  --define:process.env.NODE_ENV='"production"'

Why the polyfills?

  • window.process — freeze-dry depends on postcss-values-parser, which imports Node.js util module. The util npm polyfill checks process.version at init time.
  • util npm package — browser polyfill for Node.js util, required by postcss internals.

Source

License

freeze-dry is licensed under the MIT License.

About

Prebuilt browser bundle of freeze-dry for injecting into browser contexts

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors