SavedPixel HTML CSS JS Extractor

Public repository for the SavedPixel HTML CSS JS Extractor Chrome extension.

SavedPixel is a local-first Chrome extension for selecting rendered webpage content and exporting it as clean standalone HTML, Markdown, or a bundled project with related CSS, images, fonts, and optional scripts.

• Chrome Web Store: https://chromewebstore.google.com/detail/savedpixel-html-css-js-ex/lifhjfglcfmcffcpkeaiaicjckakicge
• Current release: 1.1
• Platform: Chrome Extension, Manifest V3

What it does

SavedPixel is built for developers, designers, QA teams, content teams, and anyone who needs to save or inspect rendered webpage sections without manually copying source code from DevTools.

You can use it to:

• Capture a complete page section, layout block, navigation area, card, banner, post, or document area.
• Export selected content as standalone HTML.
• Export text-focused selections as Markdown.
• Download a ZIP bundle with scoped HTML, CSS, images, fonts, and optional scripts.
• Inspect and extract the currently selected DevTools element.
• Archive page states for design review, QA reports, migration work, and local reference.

Main features

Visual element picker

• Open the picker from the Chrome toolbar.
• Hover page elements to inspect what will be selected.
• Select one element, multiple elements, or adjacent parent sections.
• Keep multiple selected sections without replacing earlier selections.
• Exclude nested children from a selected parent without removing the parent.
• Hover rows in the selection panel to highlight the matching page element.
• Optionally jump to the matching page section when hovering panel rows.
• Use a collapsible tree panel for deeper nested page structures.

Floating selection panel

• The picker panel floats above the page instead of permanently pushing the page layout aside.
• The panel starts right-anchored and can be dragged when needed.
• The panel can be resized so long element names and nested structures are easier to review.

HTML and Markdown export

• Preview extracted content before saving.
• Switch between rendered preview and code view.
• Copy or download only the actions that match the active output mode.
• Export clean standalone HTML.
• Export Markdown-only text for document-style selections.
• Use word-wrapped code views to avoid horizontal scrolling for long lines.

Bundled ZIP export

• Download a ZIP package with index.html plus related assets.
• Keep small component exports scoped to the selected roots instead of collecting the whole source page.
• Include CSS, images, fonts, and optional scripts when requested.
• Preserve used web fonts with deterministic local filenames where possible.
• Use font fallback recovery for stale or renamed remote font URLs.
• Keep download warnings visible when assets require fallbacks or cannot be fetched.

DevTools workflow

• Open Chrome DevTools.
• Select an element in the Elements panel.
• Use the SavedPixel DevTools panel to extract the inspected element.

Local-first privacy

• No account is required.
• No analytics or tracking is included.
• Extracted content is processed locally in the browser.
• Files are saved only when you click a download action.

Install

Chrome Web Store

Install the extension from the Chrome Web Store:

https://chromewebstore.google.com/detail/savedpixel-html-css-js-ex/lifhjfglcfmcffcpkeaiaicjckakicge

Local development install

1. Clone or download this repository.
2. Open chrome://extensions in Chrome.
3. Enable Developer mode.
4. Click Load unpacked.
5. Select the assets/ folder.

Repository layout

Only source and public release documentation should be published in this repository.

Path	Purpose
assets/	Runtime Chrome extension source loaded by Chrome.
assets/manifest.json	Manifest V3 configuration and release version.
assets/background.js	Service worker for downloads, asset fetching, ZIP creation, and messaging.
assets/content.js	Injected page UI, picker, export modal, preview, and export preparation.
assets/categorizer.js	Section/category labeling helpers.
assets/devtools.html, assets/devtools.js	DevTools page bridge.
assets/devtools_panel.html, assets/devtools_panel.js	SavedPixel DevTools panel UI.
assets/icons/	Extension icons referenced by the manifest.
docs/	Public release, publishing, privacy, and implementation documentation.
scripts/package_release.py	Builds the clean Chrome Web Store upload ZIP.
CHANGELOG.md	Release changelog.
BUGFIX_LOG.md	Detailed bug-fix log.

The public repository should not include local build output, .DS_Store, temporary files, internal agent workflow files, private task logs, or unpublished release artifacts.

Package for Chrome Web Store

Build the Chrome Web Store upload ZIP with:

python3 scripts/package_release.py

The script creates:

tmp/release/savedpixel-html-css-js-extractor-1.1.zip

The ZIP is intentionally limited to runtime extension files and keeps manifest.json at the ZIP root.

Documentation

• Release notes: docs/releases/1.1.md
• Changelog: CHANGELOG.md
• Bug fix log: BUGFIX_LOG.md
• Chrome Web Store publish guide: docs/publish-guide.md
• Chrome Web Store submission notes: docs/chrome-web-store-submission.md
• Privacy draft: docs/privacy-policy-draft.md

License

This repository is public source for the SavedPixel Chrome extension. No open-source license has been granted unless a license file in this repository says otherwise.