Chrome Extension Screenshot Generator

Reusable HTML + JavaScript toolkit for generating Chrome extension marketing screenshots. Designed to provide:

• Customizable HTML/CSS templates
• One-click downloads for common resolutions (e.g. 1280×800, 640×400)
• Automatic embedding and Data URL copy helpers
• html2canvas loading and convenience helpers

Getting Started

cd chrome-ext-screenshot
npm install
npm run preview

Open the served templates/default.html to experiment. Update text, replace images, and trigger downloads via the buttons.

Structure

• lib/generator.js: Core initialization and capture logic (window.ScreenshotGenerator)
• templates/default.html: Reference template wired up with the library
• styles/default.css: Styling for the template
• examples/: Placeholder assets and notes

Usage

1. Copy lib/generator.js into your project or load it via script tag.
2. Annotate your markup:
   • Wrap the screenshot content in an element with data-screenshot.
   • Mark the element you want rendered as data-screenshot-target.
   • Add buttons with data-screenshot-download="WIDTHxHEIGHT" or data-screenshot-width/height.
   • Optional data-screenshot-output nodes receive the generated Data URL or preview.
3. Initialize with ScreenshotGenerator.init().

<div class="promo" data-screenshot>
  <div data-screenshot-target> ... </div>
  <button data-screenshot-download="1280x800">Download</button>
</div>
<script src="./lib/generator.js"></script>
<script>
  ScreenshotGenerator.init();
</script>

Configuration

• data-screenshot-width, data-screenshot-height: default capture size
• data-screenshot-filename: base filename without extension
• data-screenshot-background: override background color (transparent by default resolves automatically)
• data-screenshot-auto="load": auto-generate on load (also supports true/embed)
• data-screenshot-transparent="true": preserve transparency
• data-screenshot-html2canvas: custom html2canvas URL

API

ScreenshotGenerator.init({ selector, scope, html2canvasUrl, backgroundColor, transparent });
ScreenshotGenerator.captureElement(element, options);
ScreenshotGenerator.loadHtml2Canvas(url);

captureElement returns a promise resolving to a Data URL. Pass { width, height, format, quality, backgroundColor, transparent } as needed.

License

MIT