2.0.0

ZenReader v2.0.0 Release Notes

Complete TypeScript Rebuild

ZenReader v2.0.0 is a ground-up rewrite of the entire extension from vanilla JavaScript to TypeScript, with a modern build toolchain powered by Vite. All core functionality — element selection, focus mode, and style preservation — remains identical. The user experience is unchanged.

What's New

TypeScript + Strict Mode

• Every source file rewritten in TypeScript with strict: true
• Interfaces for all state objects, message payloads, and function signatures
• Type-safe Chrome API usage via @types/chrome

Vite Build System

• Vite with vite-plugin-web-extension replaces direct file loading
• ES Modules bundled into optimized IIFE for content script injection
• Tree-shaking eliminates dead code from the final bundle
• npm run build runs type checking (tsc --noEmit) then Vite build
• npm run dev starts a Vite dev server for faster iteration

ES Module Architecture

• Global variables and script loading order replaced with explicit import/export
• Singleton state module (getState()) replaces shared zenReaderState global
• Clean dependency graph with no circular references

On-Demand Content Script Injection

• Content scripts are no longer declared in manifest.json content_scripts
• Background service worker injects scripts via chrome.scripting API only when the user activates the extension
• Re-injection guard (window.__zenReaderInjected) prevents double initialization
• Zero performance impact on pages where ZenReader is not used

Unit Test Suite

• 63 tests across 4 test files using Vitest with happy-dom environment
• Coverage for color analysis, DOM utilities, layout fixer, and Shadow DOM styles
• Test structure mirrors source tree (test/content/styles/, test/content/utils/)
• npm run test and npm run test:watch commands

Project Structure Reorganization

• Source code consolidated under src/ (background, content, about, manifest)
• Static assets moved to public/ (_locales, icons)
• Documentation and GitHub assets moved to docs/
• Build output isolated to dist/ (not checked into git)

Breaking Changes

• Requires Node.js v18+ — npm install is now needed before building
• Build step required — load dist/ directory in Chrome instead of project root
• build.sh updated — now runs TypeScript type check + Vite build pipeline before packaging

By the Numbers

Metric	v1.2.0	v2.0.0
Language	JavaScript (ES5/ES6)	TypeScript (strict)
Build system	None	Vite
Module system	Global scope	ES Modules
Test framework	None (manual only)	Vitest (63 tests)
Type safety	None	Full (tsc --noEmit)
Content script loading	Every page (manifest)	On-demand (chrome.scripting)

Migration

For developers who previously loaded ZenReader by pointing Chrome at the project root:

1. Install Node.js v18+ if not already installed
2. Run npm install to install dependencies
3. Run npm run build to generate the dist/ directory
4. In chrome://extensions/, update the unpacked extension path to the dist/ directory

Full Changelog

• Add v2 build toolchain: Vite, TypeScript, vitest configuration
• Add TypeScript content scripts: state, styles, utils, selection, and focus mode
• Add TypeScript background service worker with on-demand injection
• Add content script CSS with overlay, selection, and focus mode styles
• Add TypeScript about page with corrected icon paths
• Add unit tests for color utils, layout fixer, shadow DOM styles, and DOM utils
• Update build.sh for Vite-based build pipeline
• Remove legacy v1 source files superseded by TypeScript rebuild
• Reorganize project structure: consolidate CSS, mirror test layout, tidy docs
• Update README and AGENTS.md for v2 TypeScript architecture

1.2.0

ZenReader v1.2.0 Release Notes

This release significantly improves style fidelity in Focus Mode. Previously, many websites would lose their visual styling when viewed in ZenReader due to cross-origin stylesheet restrictions, missing web fonts, unresolved lazy-loaded images, and lost pseudo-elements. All of these have been addressed.

What's New

Cross-Origin CSS Support

• Stylesheets hosted on external CDNs and third-party domains are now fetched and applied in Focus Mode via a background service worker proxy.
• A two-phase injection approach shows content immediately with same-origin styles, then progressively applies cross-origin styles as they load.

CSS Custom Properties

• CSS custom properties (--var) defined on :root, html, and body are now collected from all stylesheets and propagated into the Shadow DOM, so themes and design tokens render correctly.

@font-face Recovery

• Web font declarations from both same-origin and cross-origin stylesheets are extracted and injected into the document and Shadow DOM, ensuring custom fonts display properly.

Pseudo-Element Materialization

• ::before and ::after pseudo-elements are now converted into real DOM nodes with their computed styles preserved, so icons, decorative elements, and content generated via CSS appear as expected.

Lazy Image Resolution

• Lazy-loaded images using data-src, data-srcset, <noscript> fallbacks, and placeholder data-URIs are resolved so all images display in Focus Mode.

Adaptive Clone Depth

• The cloning depth is now determined dynamically based on the selected element's DOM tree size, balancing styling fidelity with performance on complex pages.

Infrastructure

• Added host_permissions: ["<all_urls>"] to support cross-origin CSS fetching.
• Background service worker now handles fetchCSS messages with a 3-second timeout via AbortController.

1.1.0

ZenReader v1.1.0 Release Notes

New Features

• Added a comprehensive About page providing information about ZenReader
• Added a convenient "?" button in the focus mode toolbar for quick access to the About page
• Added context menu access to the About page through the extension icon

Improvements

• Improved toolbar layout with a more intuitive design
  • About button now positioned on the left
  • Page title centered in the toolbar
  • Exit button positioned on the right

We appreciate your feedback and support as we continue to improve ZenReader!

1.0.0

ZenReader v1.0.0 Release Notes

We're excited to announce the first official release of ZenReader, a Chrome extension designed to provide a distraction-free reading experience while preserving the original styling of web content.

🎉 Initial Release Highlights

ZenReader offers a unique approach to reader modes by maintaining websites' original design and visual identity while removing surrounding distractions.

Key Features

• Manual Selection Mode: Click on any element to focus on it
• Style Preservation: Maintains original fonts, colors, layouts, and design elements
• Multiple Activation Methods:
  • Browser toolbar icon
  • Context menu (right-click)
• Flexible Exit Options:
  • ESC key
  • Exit button in top-right corner
  • Clicking outside the focus container
  • Browser toolbar icon
  • Context menu
• Responsive Design: Adjusts to different screen sizes and orientations
• Multilingual Support: Available in English, Chinese (Traditional and Simplified), French, German, Spanish, Japanese, Korean, Portuguese, and Arabic
• Dark Mode Compatibility: Adapts to system dark mode preferences

🔧 Technical Details

• Uses Shadow DOM for style encapsulation
• Implements a style caching system for performance optimization
• Analyzes page colors to adapt to site themes (light/dark)
• Properly handles event propagation for scrolling
• Preserves computed styles to maintain original design
• Special handling for images, tables, and code blocks
• RTL language support

🐛 Known Issues & Limitations

• Style preservation works on a best-effort basis
• Some complex interactive elements may have limited functionality
• Cross-origin stylesheets may not be fully preserved due to browser security restrictions

🔮 Future Plans

We're considering adding these features in future releases:

• Automatic content detection
• Site preference memory
• Minimum font size settings
• Theme customization options
• Enhanced interactive element support

🙏 Feedback

This is our first release and we welcome your feedback! If you encounter any issues or have suggestions, please open an issue on our GitHub repository.

---

Thank you for trying ZenReader! If you find it useful, please consider giving our repository a star ⭐ on GitHub.