$ show Kenshin/simpread
This repository contains the source code for SimpRead (įŽæĻ), a browser extension for Chrome and Firefox that provides an immersive reading mode, focus mode, annotation, and later-reading capabilities. The extension extracts article content from web pages, applies customizable typography and themes, and supports exporting to numerous services including Markdown, PDF, EPUB, Kindle, email, and cloud storage (Dropbox, WebDAV, Notion, Evernote, etc.). It includes a rules-based site adaptation engine (defined in `website_list.json`) to handle hundreds of specific websites, a plugin system for user-installed scripts, and a notice/focus system to manage reading sessions. The architecture follows a typical browser extension pattern: a background script (`background.js`) manages storage, OAuth, context menus, and cross-tab communication; content scripts (`contentscripts.js`) inject reading and focus modes into pages; and multiple options pages (`options/`) provide configuration, custom CSS, site management, and notice center. The UI is built with React 0.14.8 and a custom Material Design UI kit (`mduikit`), with heavy use of jQuery for DOM manipulation. State is managed through a central storage service (`storage.js`) that provides reactive reads/writes and versioned migration. External integrations are implemented as service classes with OAuth flows, and a message-action pattern coordinates between isolated script contexts. The codebase demonstrates a strong feature set but suffers from significant technical debt: very old dependencies (webpack 1, React 0.14), deprecated lifecycle patterns, extensive global DOM manipulation mixed with React, hardcoded CDN links and provider secrets, and comments indicating hacky browser workarounds. The site adaptation rule set is large but fragile, relying on exact CSS selectors and inline JavaScript that break when websites change. Despite these issues, the project provides a wealth of reusable patterns, particularly in its custom UI components, notification system, and storage abstraction.
The LLM identified 4 files worth highlighting for reuse:
A collection of reusable Material Design React components (Button, TextField, Dialog, Switch, Tabs, Dropdown, Slider, Tooltip, Sidebar, etc.) built with CSS-in-JS. These components are self-contained, rely on jQuery for styling but wrap it in a reusable pattern, and could be extracted into a separate project. They are used throughout the options pages and provide consistent UI behavior.
A flexible notification component that supports toast, modal, and snackbar modes, with loading and holdon states. It is used across all extension pages for user feedback. The component is standalone (no heavy dependencies), exposes a simple API via a constructor and `.Render()` method, and can be easily extracted for use in other projects requiring rich notifications.
A central storage service that abstracts Chrome storage (and localStorage fallback) into a reactive data store. It provides a schema-driven default state, versioned data migration via `Version.Verify()`, reactive reads/writes with callback patterns, and helper methods for sites, plugins, statistics, and export configurations. The pattern of a single store with version control and migration is reusable for any extension needing persistent configuration.
An adapter that wraps Chrome and Firefox API differences (runtime.sendMessage, tabs.create, storage, etc.) into a unified `browser` object. This pattern allows the rest of the codebase to be browser-agnostic. The implementation is minimal but complete and could serve as a template for building cross-browser extension adapters.