aReader

An Enhanced Reading Experience Chrome Extension

Accessibility-focused browser extension for enhanced web reading

Overview

aReader is a Chrome extension designed to provide an enhanced reading experience for users with diverse needs. It features a distraction-free reader mode, ADHD assistance, dyslexia support, AI-powered chat assistant, and text-to-speech capabilities.

Key Features

Reader Mode - Clean, distraction-free reading interface
ADHD Assistance - Visual word highlighting to improve focus
Dyslexia Support - OpenDyslexic font integration for improved readability
AI Chat Assistant - Powered by Google Gemini API for contextual Q&A
Text-to-Speech - Google Cloud TTS integration for audio playback
Customizable Themes - Multiple background color options with dark mode support
Tab State Management - Independent feature states per browser tab

Installation

Prerequisites

Google Chrome browser (v88+)
Python 3.9.13 (for backend services)
Google Cloud account (for TTS and Gemini API)

Chrome Extension Setup

Clone the repository:

git clone https://github.com/your-username/aReader.git
cd aReader

Load the extension in Chrome:
- Navigate to chrome://extensions/
- Enable "Developer mode"
- Click "Load unpacked"
- Select the aReader/aReader directory

Backend Setup

Create and activate a Python virtual environment:

cd python-backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\Activate

Install dependencies:
```
pip install -r requirements.txt
```
Start the backend server:
```
python app.py
```

The server runs at http://127.0.0.1:5000 by default.

Configuration

Environment Variables

Create a .env file in the python-backend directory:

GOOGLE_APPLICATION_CREDENTIALS="/path/to/your/google_credential.json"
GEMINI_API_KEY="your-gemini-api-key"
PORT=5000

Google Cloud Setup

Create a Google Cloud project
Enable the Cloud Text-to-Speech API
Create a service account and download the credentials JSON
Enable the Gemini API and obtain an API key

Architecture

aReader follows a modular architecture with clear separation of concerns between the frontend Chrome extension and the Python backend services.

aReader/
├── aReader/                     # Chrome Extension
│   ├── manifest.json            # Extension configuration
│   ├── images/                  # Extension icons (16/48/128px)
│   ├── adhd/                    # ADHD assistance module
│   │   ├── adhd.js              # Core logic
│   │   └── adhd.css             # Styles
│   ├── dyslexia/                # Dyslexia support module
│   │   ├── dyslexia.js          # Core logic
│   │   └── dyslexia.css         # Styles
│   ├── OpenDyslexic/            # OpenDyslexic font files
│   │   └── *.otf                # Font variants
│   ├── chatbox/                 # AI Chat assistant
│   │   ├── chatbox.js           # UI and logic
│   │   ├── chatbox.css          # Styles
│   │   ├── chatStorage.js       # Data persistence
│   │   └── chatApiService.js    # API communication
│   ├── popup/                   # Extension popup
│   │   ├── popup.html           # UI markup
│   │   └── popup.js             # Control logic
│   ├── reader/                  # Reader mode
│   │   ├── reader.js            # Core logic
│   │   └── reader.css           # Styles
│   └── serviceworker/           # Background service
│       └── background.js        # Tab state management
│
├── python-backend/              # Backend Services
│   ├── app.py                   # Flask application
│   ├── google_credential.json   # GCP credentials
│   └── requirements.txt         # Python dependencies
│
├── requirements.txt             # Root dependencies
└── README.md                    # Documentation

Core Components

Extension Manifest (`manifest.json`)

Defines permissions, content scripts, and resource access:

{
  "manifest_version": 3,
  "action": {
    "default_popup": "popup/popup.html"
  },
  "background": {
    "service_worker": "serviceworker/background.js"
  },
  "content_scripts": [{
    "css": ["chatbox/chatbox.css", "reader/reader.css", "adhd/adhd.css", "dyslexia/dyslexia.css"],
    "js": ["chatbox/chatbox.js", "reader/reader.js", "adhd/adhd.js", "dyslexia/dyslexia.js"]
  }],
  "web_accessible_resources": [{
    "resources": ["chatbox/chatStorage.js", "chatbox/chatApiService.js", "OpenDyslexic/*.otf"]
  }]
}

Reader Module (`reader/reader.js`)

Provides clean reading experience with content extraction:

// Core functions
updateBackgroundColor()    // Theme management
findMainContent()          // Content extraction
cleanFormatting()          // DOM sanitization
disableReader()            // Cleanup

ADHD Helper (`adhd/adhd.js`)

Implements bionic reading-style word highlighting:

window.ADHDHelper = {
  init()                   // Initialize module
  setupMessageListener()   // Handle messages
  apply(isEnabled)         // Toggle formatting
  clear()                  // Reset state
}

Dyslexia Helper (`dyslexia/dyslexia.js`)

Provides OpenDyslexic font support:

window.DyslexiaHelper = {
  init()                      // Initialize module
  checkFontAvailability()     // Verify font loading
  loadFontManually()          // Fallback font loading
  apply(isEnabled)            // Toggle font
  addLanguageAttributes()     // Accessibility support
}

Chat Manager (`chatbox/chatbox.js`)

AI-powered contextual assistant:

window.ChatboxManager = {
  init()               // Initialize chat UI
  create()             // Render chatbox
  remove()             // Cleanup
  adjustPageLayout()   // Responsive layout
  bindEvents()         // Event handlers
}

Background Service (`serviceworker/background.js`)

Manages per-tab state:

// State management classes
TabStateContainer      // State data structure
TabStateManager        // CRUD operations

// Event listeners
chrome.tabs.onCreated
chrome.tabs.onActivated
chrome.tabs.onRemoved
chrome.tabs.onUpdated

API Reference

Text-to-Speech Endpoint

POST /synthesize
Content-Type: application/json

{
  "text": "Text to synthesize",
  "voice": "en-US-Neural2-C",    // Optional
  "language": "en-US"             // Optional
}

Response: Audio data in WAV format

Chat Endpoint

POST /chat
Content-Type: application/json

{
  "message": "User query",
  "context": "Page content"       // Optional
}

Response:

{
  "response": "AI-generated answer"
}

Development

Development Guidelines

Follow modular architecture principles
Maintain consistent code style
Keep modules in their respective directories
Reload extension after code changes
Use Chrome DevTools for debugging

CSS Organization

File	Purpose
`reader.css`	Reading mode layout, typography, themes
`adhd.css`	Word highlighting styles
`dyslexia.css`	Font definitions, spacing optimization
`chatbox.css`	Chat UI, responsive design

Key Styling Features

Max-width 800px reading container
CSS variables for theme control
1.8 line-height for comfortable reading
Automatic dark mode detection
Responsive design for mobile devices

Roadmap

Current Status

✅ Reader mode with customizable backgrounds
✅ ADHD word prefix bolding
✅ Dyslexia font support (OpenDyslexic Bold)
✅ AI chat assistant with Gemini API
✅ Google Cloud TTS integration
✅ Per-tab state management
✅ Modular codebase architecture

Planned Features

Enhanced ADHD Support
- Dynamic bold length based on word/syllable count
- Syllable boundary visual hints
User Customization
- Adjustable ADHD/Dyslexia parameters
- Custom font size and spacing controls
Performance Optimization
- Large page processing improvements
- Memory footprint reduction
Developer Experience
- Build tool integration
- Automated testing framework

中文文档

项目概述

aReader 是一款 Chrome 浏览器扩展，旨在为不同需求的用户提供增强的阅读体验。主要功能包括无干扰阅读模式、ADHD 辅助、阅读障碍支持、AI 聊天助手和文本转语音。

主要功能

阅读模式 - 简洁、无干扰的阅读界面
ADHD 辅助 - 单词视觉高亮，提升专注力
阅读障碍支持 - OpenDyslexic 字体集成，提高可读性
AI 聊天助手 - 基于 Google Gemini API 的上下文问答
文本转语音 - Google Cloud TTS 集成
可定制主题 - 多种背景色选项，支持深色模式
标签页状态管理 - 每个浏览器标签页独立的功能状态

环境配置

Python 环境

# Python 版本要求：3.9.13
cd python-backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\Activate
pip install -r requirements.txt

后端配置

在 python-backend 目录下创建 .env 文件：

GOOGLE_APPLICATION_CREDENTIALS="/path/to/your/google_credential.json"
GEMINI_API_KEY="your-gemini-api-key"
PORT=5000

启动后端服务：

python app.py

开发注意事项

使用 Chrome 扩展开发者模式加载解压的扩展
修改代码后需要刷新扩展
保持代码风格一致
遵循模块化开发原则
每个模块放在各自的文件夹中，保持代码结构清晰

已完成功能

Reader 模式 - 基本阅读功能和界面
ADHD 辅助 - 单词前缀加粗和视觉标记
Dyslexia 辅助 - 阅读障碍用户字体支持（OpenDyslexic Bold）
聊天助手 - 支持 Gemini API 的基本功能
TTS 语音服务 - 基于 Google Cloud TTS

未来开发计划

ADHD 辅助功能提升
- 根据单词长度或音节动态调整加粗的字母数量
- 为音节边界添加视觉提示
用户界面和设置改进
- 增加更多自定义选项
- 允许用户调整 ADHD 和 Dyslexia 功能的特定参数
性能优化
- 优化大页面的处理速度
- 减小内存占用
开发工具集成
- 引入构建工具，实现更好的代码组织
- 添加测试框架

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ for accessible web reading

Report Bug · Request Feature

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
aReader		aReader
python-backend		python-backend
.gitignore		.gitignore
README.md		README.md
requirements.txt		requirements.txt

certaindragon3/aReader-public

Folders and files

Latest commit

History

Repository files navigation

aReader

Overview

Key Features

Table of Contents

Installation

Prerequisites

Chrome Extension Setup

Backend Setup

Configuration

Environment Variables

Google Cloud Setup

Architecture

Core Components

Extension Manifest (manifest.json)

Reader Module (reader/reader.js)

ADHD Helper (adhd/adhd.js)

Dyslexia Helper (dyslexia/dyslexia.js)

Chat Manager (chatbox/chatbox.js)

Background Service (serviceworker/background.js)