Skip to content

A Chrome and Edge extension that transforms your browsing history into an interactive heatmap, featuring multi-language support and modern UI design for enhanced data analysis and user experience.

License

Notifications You must be signed in to change notification settings

firevenus/HistoryHeat

Repository files navigation

HistoryHeat - 浏览器历史记录热力图可视化工具

项目简介

HistoryHeat 是一个用于可视化浏览器历史记录的工具,通过热力图的形式展示用户在不同时间段的浏览行为。

功能特性

  • 可视化浏览器历史记录
  • 支持多语言界面
  • 自定义时间范围
  • 导出可视化结果

快速开始

# 克隆项目
$ git clone https://github.com/firevenus/HistoryHeat.git

# 安装依赖
$ npm install

# 启动开发服务器
$ npm run dev

使用说明

  1. 打开扩展程序
  2. 选择要分析的时间范围
  3. 查看热力图结果
  4. 可导出图片或数据

贡献指南

我们欢迎任何形式的贡献!请查看我们的贡献指南

相关链接

English | 中文 | 한국어 | 日本語 | Українська | Español | Deutsch | Русский

Browser History Heatmap Visualization Tool

A browser history visualization tool based on React and D3.js, featuring multi-language support and modern UI design.

Features

  • Interactive heatmap visualization using D3.js
  • Multi-language support (English, Chinese, Japanese, Korean, Spanish, German, Ukrainian, Russian)
  • Dynamic color gradients based on visit frequency
  • Responsive design with zoom and adaptive layout
  • Detailed website visit statistics and analysis
  • Bookmark functionality

Latest Updates

v0.0.7

  • Improved UI interface, adjusted to bright theme style
  • Improved tab style, enhanced user experience
  • Updated statistics area and website list design
  • Rewritten dark mode setting, ensuring consistency across different themes
  • Integrated development log, created a unified multi-language document system

v0.0.6

  • Implemented real browser history record reading and analysis
  • Removed simulated data, used actual browsing history for visualization
  • Optimized data processing logic, improved performance and stability

v0.0.3

  • Implemented browsing history data synchronization function
  • Added IndexedDB data storage
  • Implemented time range filtering function
  • Optimized data loading performance
  • Improved error handling mechanism

v0.0.2

  • Built project basic architecture
  • Implemented heatmap basic components
  • Designed and implemented basic data model

v0.0.1

  • Completed project initialization
  • Configured basic development environment
  • Added necessary project dependencies

Multilingual Changelog

HistoryHeat's changelog supports the following eight languages:

  1. Chinese
  2. English
  3. Korean
  4. Japanese
  5. Ukrainian
  6. Spanish
  7. German
  8. Russian

How to Generate Multilingual Changelog

We provide a simple tool to help you generate multilingual changelogs:

  1. Make sure Node.js is installed on your system
  2. Run the following command in the project root directory:
npm run changelog
  1. Follow the prompts to enter the version number and update content
  2. The tool will automatically generate changelogs for all eight languages and update the CHANGELOG.md file

Welcome developers who are interested in contributing to this plugin!

浏览历史热力图可视化工具

一个基于React和D3.js的浏览历史热力图可视化工具,支持多语言切换和现代化UI设计。

功能特点

  • 使用D3.js绘制交互式热力图
  • 支持英文、中文、日文、韩文、西班牙文、德文、乌克兰文和俄文多语言切换
  • 基于访问频率的动态颜色渐变
  • 响应式设计,支持缩放和自适应布局
  • 详细的网站访问统计和分析
  • 支持收藏夹功能

最新更新

v0.0.7

  • 优化UI界面,调整为明亮主题风格
  • 改进标签页样式,提升用户体验
  • 更新统计区域和网站列表设计
  • 重写暗色模式设置,确保在不同主题下的一致性
  • 整合开发日志,创建统一的多语言文档体系

v0.0.6

  • 实现真实浏览器历史记录的读取和分析
  • 移除模拟数据,使用实际的浏览历史进行可视化
  • 优化数据处理逻辑,提升性能和稳定性

v0.0.3

  • 实现浏览历史数据同步功能
  • 添加IndexedDB数据存储
  • 实现时间范围筛选功能
  • 优化数据加载性能
  • 改进错误处理机制

v0.0.2

  • 搭建项目基础架构
  • 实现热力图基础组件
  • 设计并实现基础数据模型

v0.0.1

  • 完成项目初始化
  • 配置基础开发环境
  • 添加必要的项目依赖

多语言更新日志

HistoryHeat的更新日志支持以下八种语言:

  1. 中文
  2. 英文
  3. 韩文
  4. 日文
  5. 乌克兰文
  6. 西班牙文
  7. 德文
  8. 俄文

如何生成多语言更新日志

我们提供了一个简单的工具来帮助您生成多语言更新日志:

  1. 确保Node.js已安装在您的系统上
  2. 在项目根目录下运行以下命令:
npm run changelog
  1. 按照提示输入版本号和更新内容
  2. 工具会自动为所有八种语言生成更新日志,并更新CHANGELOG.md文件

欢迎感兴趣的开发者一起参与开发这款插件!

브라우저 기록 히트맵 시각화 도구

React와 D3.js 기반의 브라우저 기록 시각화 도구로, 다국어 지원과 현대적인 UI 디자인을 제공합니다.

주요 기능

  • D3.js를 활용한 인터랙티브 히트맵
  • 다국어 지원 (영어, 중국어, 일본어, 한국어, 스페인어, 독일어, 우크라이나어, 러시아어)
  • 방문 빈도 기반 동적 색상 그라데이션
  • 확대/축소 및 적응형 레이아웃의 반응형 디자인
  • 상세한 웹사이트 방문 통계 및 분석
  • 북마크 기능

최신 업데이트

v0.0.7

  • 최적화된 UI 인터페이스, 밝은 테마 스타일로 조정
  • 탭 스타일 개선, 사용자 경험 향상
  • 통계 영역 및 웹사이트 목록 디자인 업데이트
  • 어두운 모드 설정 재작성, 다른 테마에서의 일관성 보장
  • 개발 로그 통합, 다국어 문서 시스템 통합

v0.0.6

  • 실제 브라우저 기록 읽기 및 분석 구현
  • 시뮬레이션 데이터 제거, 실제 방문 기록 사용 시각화
  • 데이터 처리 로직 최적화, 성능 및 안정성 향상

v0.0.3

  • 방문 기록 데이터 동기화 기능 구현
  • IndexedDB 데이터 저장 추가
  • 시간 범위 필터링 기능 구현
  • 데이터 로드 성능 최적화
  • 오류 처리 메커니즘 개선

v0.0.2

  • 프로젝트 기본 아키텍처 구축
  • 열 맵 기본 구성 요소 구현
  • 기본 데이터 모델 설계 및 구현

v0.0.1

  • 프로젝트 초기화 완료
  • 기본 개발 환경 구성
  • 필요한 프로젝트 종속성 추가

다국어 변경 로그

HistoryHeat의 변경 로그는 다음 여덟 가지 언어를 지원합니다:

  1. 중국어
  2. 영어
  3. 한국어
  4. 일본어
  5. 우크라이나어
  6. 스페인어
  7. 독일어
  8. 러시아어

다국어 변경 로그 생성 방법

다국어 변경 로그를 생성하는 간단한 도구를 제공합니다:

  1. 시스템에 Node.js가 설치되어 있는지 확인하세요
  2. 프로젝트 루트 디렉토리에서 다음 명령을 실행하세요:
npm run changelog
  1. 프롬프트에 따라 버전 번호와 업데이트 내용을 입력하세요
  2. 도구가 자동으로 8개 언어의 변경 로그를 생성하고 CHANGELOG.md 파일을 업데이트합니다

이 플러그인 개발에 관심 있는 개발자들의 참여를 환영합니다!

ブラウザ履歴ヒートマップ可視化ツール

ReactとD3.jsを基盤とした、多言語対応とモダンUIデザインを特徴とするブラウザ履歴可視化ツール。

主な機能

  • D3.jsによるインタラクティブなヒートマップ
  • 多言語対応(英語、中国語、日本語、韓国語、スペイン語、ドイツ語、ウクライナ語、ロシア語)
  • アクセス頻度に基づく動的な色グラデーション
  • ズームと適応レイアウトによるレスポンシブデザイン
  • 詳細なウェブサイトアクセス統計と分析
  • ブックマーク機能

最新アップデート

v0.0.7

  • グローバルフォント表示の改善とMi Sansフォントの統合
  • 様々なシーンに対応するマルチウェイトフォントのサポート
  • 統合開発ログの作成と多言語ドキュメントシステムの作成

v0.0.6

  • 実際のブラウザ履歴の読み取りと分析の実装
  • シミュレーションデータの削除と実際の閲覧履歴の使用による可視化
  • データ処理ロジックの最適化とパフォーマンスと安定性の向上

v0.0.3

  • 閲覧履歴データの同期機能の実装
  • IndexedDBデータの保存の追加
  • 時間範囲フィルタリング機能の実装
  • データロードパフォーマンスの最適化
  • エラー処理メカニズムの改善

v0.0.2

  • プロジェクトの基本アーキテクチャの構築
  • ヒートマップの基本コンポーネントの実装
  • 基本データモデルの設計と実装

v0.0.1

  • プロジェクトの初期化完了
  • 基本開発環境の構成
  • 必要なプロジェクト依存関係の追加

多言語チェンジログ

HistoryHeatのチェンジログは以下の八つの言語をサポートしています:

  1. 中国語
  2. 英語
  3. 韓国語
  4. 日本語
  5. ウクライナ語
  6. スペイン語
  7. ドイツ語
  8. ロシア語

多言語チェンジログの生成方法

多言語チェンジログを生成するための簡単なツールを提供しています:

  1. システムにNode.jsがインストールされていることを確認してください
  2. プロジェクトのルートディレクトリで以下のコマンドを実行します:
npm run changelog
  1. プロンプトに従ってバージョン番号と更新内容を入力してください
  2. ツールは自動的に8つの言語すべてのチェンジログを生成し、CHANGELOG.mdファイルを更新します

プラグインの開発に興味のある開発者の皆様のご参加をお待ちしております!

Інструмент візуалізації теплової карти історії браузера

Інструмент візуалізації історії браузера на основі React та D3.js, з підтримкою багатьох мов та сучасним дизайном інтерфейсу.

Функції

  • Інтерактивна візуалізація теплової карти за допомогою D3.js
  • Багатомовна підтримка (англійська, китайська, японська, корейська, іспанська, німецька, українська, російська)
  • Динамічні кольорові градієнти на основі частоти відвідувань
  • Адаптивний дизайн з масштабуванням та адаптивним макетом
  • Детальна статистика та аналіз відвідувань веб-сайтів
  • Функціональність закладок

Останні оновлення

v0.0.7

  • Покращення глобального відображення шрифтів завдяки інтеграції шрифту Mi Sans
  • Підтримка шрифтів різної ваги для різних сценаріїв
  • Інтеграція журналу розробки та створення багатомовної документаційної системи

v0.0.6

  • Реалізація читання та аналізу реальних історій браузера
  • Видалення симуляційних даних та використання реальних історій перегляду для візуалізації
  • Оптимізація логіки обробки даних та поліпшення продуктивності та стабільності

v0.0.3

  • Реалізація функції синхронізації історій перегляду
  • Додавання зберігання даних IndexedDB
  • Реалізація функції фільтрації за часом
  • Оптимізація продуктивності завантаження даних
  • Поліпшення механізму обробки помилок

v0.0.2

  • Створення базової архітектури проекту
  • Реалізація базового компонента візуалізації
  • Проектування та реалізація базової моделі даних

v0.0.1

  • Завершення початкового ініціювання проекту
  • Налаштування базового розробного середовища
  • Додавання необхідних залежностей проекту

Багатомовний журнал змін

Журнал змін HistoryHeat підтримує такі вісім мов:

  1. Китайська
  2. Англійська
  3. Корейська
  4. Японська
  5. Українська
  6. Іспанська
  7. Німецька
  8. Російська

Як створити багатомовний журнал змін

Ми надаємо простий інструмент для створення багатомовних журналів змін:

  1. Переконайтеся, що Node.js встановлено на вашій системі
  2. Виконайте таку команду в кореневому каталозі проекту:
npm run changelog
  1. Дотримуйтесь підказок для введення номера версії та вмісту оновлення
  2. Інструмент автоматично створить журнали змін для всіх восьми мов та оновить файл CHANGELOG.md

Ми вітаємо розробників, які зацікавлені у внеску в цей плагін!

Herramienta de visualización de mapa de calor del historial de navegación

Una herramienta de visualización del historial de navegación basada en React y D3.js, con soporte multilingüe y diseño de interfaz de usuario moderno.

Características

  • Visualización interactiva de mapa de calor utilizando D3.js
  • Soporte multilingüe (Inglés, Chino, Japonés, Coreano, Español, Alemán, Ucraniano, Ruso)
  • Gradientes de color dinámicos basados en la frecuencia de visitas
  • Diseño responsivo con zoom y diseño adaptativo
  • Estadísticas y análisis detallados de visitas a sitios web
  • Funcionalidad de marcadores

Últimas actualizaciones

v0.0.7

  • Mejora de la visualización global de fuentes con la integración de la fuente Mi Sans
  • Soporte de fuentes de múltiples pesos para diversos escenarios
  • Integración de registro de desarrollo y creación de sistema de documentación multilingüe

v0.0.6

  • Implementación de lectura y análisis de historial de navegador real
  • Eliminación de datos de simulación y uso de historial de navegación real para visualización
  • Optimización de lógica de procesamiento de datos y mejora de rendimiento y estabilidad

v0.0.3

  • Implementación de la función de sincronización de historial de navegación
  • Adición de almacenamiento de datos IndexedDB
  • Implementación de la función de filtrado por rango de tiempo
  • Optimización del rendimiento de carga de datos
  • Mejora del mecanismo de manejo de errores

v0.0.2

  • Construcción de la arquitectura básica del proyecto
  • Implementación del componente básico de mapa de calor
  • Diseño y implementación del modelo de datos básico

v0.0.1

  • Finalización de la inicialización del proyecto
  • Configuración del entorno de desarrollo básico
  • Adición de dependencias de proyecto necesarias

Registro de cambios multilingüe

El registro de cambios de HistoryHeat admite los siguientes ocho idiomas:

  1. Chino
  2. Inglés
  3. Coreano
  4. Japonés
  5. Ucraniano
  6. Español
  7. Alemán
  8. Ruso

Cómo generar un registro de cambios multilingüe

Proporcionamos una herramienta simple para ayudarte a generar registros de cambios multilingües:

  1. Asegúrate de que Node.js esté instalado en tu sistema
  2. Ejecuta el siguiente comando en el directorio raíz del proyecto:
npm run changelog
  1. Sigue las indicaciones para introducir el número de versión y el contenido de la actualización
  2. La herramienta generará automáticamente registros de cambios para los ocho idiomas y actualizará el archivo CHANGELOG.md

¡Damos la bienvenida a los desarrolladores interesados en contribuir a este plugin!

Browser-Verlauf Heatmap-Visualisierungstool

Ein auf React und D3.js basierendes Visualisierungstool für den Browser-Verlauf mit mehrsprachiger Unterstützung und modernem UI-Design.

Funktionen

  • Interaktive Heatmap-Visualisierung mit D3.js
  • Mehrsprachige Unterstützung (Englisch, Chinesisch, Japanisch, Koreanisch, Spanisch, Deutsch, Ukrainisch, Russisch)
  • Dynamische Farbverläufe basierend auf der Besuchshäufigkeit
  • Responsives Design mit Zoom und adaptivem Layout
  • Detaillierte Website-Besuchsstatistiken und -analysen
  • Lesezeichen-Funktionalität

Neueste Updates

v0.0.7

  • Verbesserte globale Schriftanzeige durch Integration der Mi Sans-Schriftart
  • Unterstützung mehrerer Schriftgewichte für verschiedene Szenarien
  • Integration von Entwicklungsprotokoll und Erstellung eines mehrsprachigen Dokumentensystems

v0.0.6

  • Implementierung der tatsächlichen Browser-Verlauf-Lesung und -Analyse
  • Entfernung der simulierten Daten und Verwendung der tatsächlichen Browsing-Verlauf für die Visualisierung
  • Optimierung der Datenverarbeitungslogik und Verbesserung der Leistung und Stabilität

v0.0.3

  • Implementierung der Browsing-Verlauf-Synchronisierungsfunktion
  • Hinzufügen der IndexedDB-Datenspeicherung
  • Implementierung der Zeitbereichsfilterfunktion
  • Optimierung der Datenladeleistung
  • Verbesserung des Fehlerbehandlungsmechanismus

v0.0.2

  • Erstellung der grundlegenden Projektarchitektur
  • Implementierung der grundlegenden Heatmap-Komponente
  • Entwurf und Implementierung der grundlegenden Datenmodell

v0.0.1

  • Fertigstellung der Projektinitialisierung
  • Konfiguration der grundlegenden Entwicklungsumgebung
  • Hinzufügen der erforderlichen Projektabhängigkeiten

Mehrsprachiges Änderungsprotokoll

Das Änderungsprotokoll von HistoryHeat unterstützt die folgenden acht Sprachen:

  1. Chinesisch
  2. Englisch
  3. Koreanisch
  4. Japanisch
  5. Ukrainisch
  6. Spanisch
  7. Deutsch
  8. Russisch

Wie man ein mehrsprachiges Änderungsprotokoll generiert

Wir bieten ein einfaches Tool, um Ihnen bei der Erstellung mehrsprachiger Änderungsprotokolle zu helfen:

  1. Stellen Sie sicher, dass Node.js auf Ihrem System installiert ist
  2. Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus:
npm run changelog
  1. Folgen Sie den Anweisungen, um die Versionsnummer und den Aktualisierungsinhalt einzugeben
  2. Das Tool generiert automatisch Änderungsprotokolle für alle acht Sprachen und aktualisiert die Datei CHANGELOG.md

Wir begrüßen Entwickler, die Interesse haben, zu diesem Plugin beizutragen!

Инструмент визуализации тепловой карты истории браузера

Инструмент визуализации истории браузера на основе React и D3.js, с поддержкой нескольких языков и современным дизайном пользовательского интерфейса.

Функции

  • Интерактивная визуализация тепловой карты с использованием D3.js
  • Многоязычная поддержка (английский, китайский, японский, корейский, испанский, немецкий, украинский, русский)
  • Динамические цветовые градиенты на основе частоты посещений
  • Отзывчивый дизайн с масштабированием и адаптивным макетом
  • Подробная статистика и анализ посещений веб-сайтов
  • Функциональность закладок

Последние обновления

v0.0.7

  • Улучшение глобального отображения шрифтов благодаря интеграции шрифта Mi Sans
  • Поддержка шрифтов разного веса для различных сценариев
  • Интеграция журнала разработки и создание многоязычной документационной системы

v0.0.6

  • Реализация чтения и анализа реальной истории браузера
  • Удаление симулированных данных и использование реальной истории просмотра для визуализации
  • Оптимизация логики обработки данных и повышение производительности и стабильности

v0.0.3

  • Реализация функции синхронизации истории просмотра
  • Добавление хранения данных IndexedDB
  • Реализация функции фильтрации по временному диапазону
  • Оптимизация загрузки данных
  • Улучшение механизма обработки ошибок

v0.0.2

  • Создание базовой архитектуры проекта
  • Реализация базового компонента тепловой карты
  • Проектирование и реализация базовой модели данных

v0.0.1

  • Завершение начальной инициализации проекта
  • Настройка базовой среды разработки
  • Добавление необходимых зависимостей проекта

Многоязычный журнал изменений

Журнал изменений HistoryHeat поддерживает следующие восемь языков:

  1. Китайский
  2. Английский
  3. Корейский
  4. Японский
  5. Украинский
  6. Испанский
  7. Немецкий
  8. Русский

Как создать многоязычный журнал изменений

Мы предоставляем простой инструмент для создания многоязычных журналов изменений:

  1. Убедитесь, что Node.js установлен в вашей системе
  2. Выполните следующую команду в корневом каталоге проекта:
npm run changelog
  1. Следуйте подсказкам для ввода номера версии и содержания обновления
  2. Инструмент автоматически создаст журналы изменений для всех восьми языков и обновит файл CHANGELOG.md

Мы приветствуем разработчиков, заинтересованных в том, чтобы внести свой вклад в этот плагин!

Tech Stack

  • React 18
  • TypeScript
  • D3.js
  • Vite
  • Radix UI
  • IndexedDB

Development

# Install dependencies
npm install

# Start development server
npm run dev:web

# Build project
npm run build:web

License

MIT License

About

A Chrome and Edge extension that transforms your browsing history into an interactive heatmap, featuring multi-language support and modern UI design for enhanced data analysis and user experience.

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published