Context - Intelligent Browse History Knowledge Graph

A Chrome extension that builds an intelligent knowledge graph from your browsing history using AI-powered semantic analysis

Table of Contents

• About
• Features
• How It Works
• Installation
  • Chrome
  • Firefox
• Configuration
• Development
  • Install Dependencies
  • Environment Variables
• Project Structure
  • Chrome Extension
  • Packages
  • Pages
• Troubleshooting
• Reference

About

Context is an intelligent Chrome extension that automatically builds a semantic knowledge graph from your browsing history. Using AI-powered content analysis, it creates meaningful connections between the pages you visit, helping you discover patterns and relationships in your research and work.

Key Capabilities

• Automatic Content Analysis: Extracts semantic meaning from web pages using AI
• Knowledge Graph Generation: Creates nodes for pages and concepts, with edges representing relationships
• Smart Filtering: Filters out irrelevant pages (auth pages, redirects) to focus on meaningful content
• Visual Graph View: Interactive visualization of your browsing knowledge graph
• Session Management: Track browsing sessions and their associated context
• Semantic Context Types: Categorizes content (technology, problem, solution, concept, tool, framework, method)

Features

Features

Core Technology Stack

• React - Modern UI framework
• TypeScript - Type-safe development
• Tailwindcss - Utility-first CSS framework
• Vite with Rollup - Fast build tooling
• Turborepo - Monorepo management
• Chrome Extensions Manifest Version 3 - Latest extension APIs

Extension Features

• AI-Powered Semantic Analysis: Uses Azure OpenAI to understand page content and extract meaningful concepts
• Intelligent Knowledge Graph: Automatically builds connections between related pages and concepts
• Real-time Processing: Analyzes pages as you browse with minimal performance impact
• Interactive Graph Visualization: Explore your browsing patterns through an interactive D3.js-powered graph
• Session Tracking: Organize your browsing into focused sessions
• Smart Content Filtering: Automatically excludes auth pages, redirects, and noise
• Multiple Edge Types: Distinguishes between sequential navigation and conceptual relationships

Development Features

• Custom i18n package - Internationalization support
• Custom HMR (Hot Module Rebuild) plugin - Fast development reloads
• Prettier & ESLint - Code formatting and linting
• End-to-end testing with WebdriverIO - Comprehensive testing

How It Works

1. Content Extraction: When you visit a page, the extension extracts the page title, metadata, and text content
2. AI Analysis: Content is sent to Azure OpenAI for semantic analysis, identifying key concepts and context types
3. Graph Building: Creates nodes for pages and concepts, with weighted edges representing relationships
4. Relationship Detection: Tracks both sequential navigation patterns and conceptual similarities
5. Visualization: Provides an interactive graph view to explore your knowledge network

Installation

Installation

1. Clone this repository: git clone <repository-url>
2. Ensure your node version is >= than in .nvmrc file, recommend to use nvm
3. Install pnpm globally: npm install -g pnpm
4. Run pnpm install
5. Configure your development environment:
   • VS Code (Recommended):
     • Install ESLint extension
     • Install Prettier extension
     • Enable Typescript Workbench version in settings:
       • CTRL + SHIFT + P → Search: Typescript: Select Typescript version... → Use Workbench version
     • For WSL users: Install Remote - WSL extension
   • WebStorm:
     • Configure ESLint
     • Configure Prettier
     • Optional: Enable File | Settings | Tools | Actions on Save → Optimize imports and Reformat code
6. Build the extension: pnpm build

Important

On Windows, make sure you have WSL enabled and Linux distribution (e.g. Ubuntu) installed on WSL.

Installation Guide

Then, depending on the target browser:

For Chrome:

1. Run:
   • Dev: pnpm dev (on Windows, run as administrator)
   • Prod: pnpm build
2. Open Chrome and navigate to chrome://extensions
3. Enable Developer mode (toggle in top-right corner)
4. Click Load unpacked
5. Select the dist directory from the project

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox
   • Prod: pnpm build:firefox
2. Open Firefox and navigate to about:debugging#/runtime/this-firefox
3. Click Load Temporary Add-on...
4. Select the ./dist/manifest.json file from the project

Note

In Firefox, extensions load in temporary mode and disappear after browser close. You'll need to reload the extension on every browser launch.

Configuration

AI Settings

Context requires Azure OpenAI configuration for semantic analysis:

1. Open the extension options page
2. Configure your Azure OpenAI settings:
   • API Key: Your Azure OpenAI API key
   • Endpoint: Your Azure OpenAI endpoint URL
   • Model: The model to use (e.g., gpt-4, gpt-3.5-turbo)

Session Management

• Start Session: Begin tracking a new browsing session
• Stop Session: End the current session
• View Graph: Open the interactive graph visualization

Development

Install Dependencies

For root package:

pnpm i <package> -w

For specific module:

pnpm i <package> -F <module-name>

Where module-name corresponds to the name field in each package.json (e.g., @extension/content-script can be referenced as just content-script).

Environment Variables

Read the complete documentation: Environment Variables Guide

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm lint - Run ESLint
• pnpm type-check - Run TypeScript type checking
• pnpm test - Run tests
• pnpm zip - Package extension into ZIP file

Project Structure

Chrome Extension

The main extension code lives in the chrome-extension directory:

• manifest.ts - Generates the manifest.json file
• src/background - Background service worker that handles:
  • Page visit tracking and content extraction
  • AI-powered semantic analysis
  • Knowledge graph generation and storage
  • Session management
• src/ai - Azure OpenAI integration for semantic analysis
• public - Extension icons and static assets

Pages

UI components and pages for the extension:

• popup - Main extension popup interface
• options - Extension settings and AI configuration
• graph-view - Interactive knowledge graph visualization
• side-panel - Chrome side panel integration
• content-ui - UI components injected into web pages
• content-runtime - Content scripts for page interaction
• devtools - Browser DevTools integration
• new-tab - Custom new tab page

Packages

Shared packages and utilities:

Core Infrastructure:

• shared - Common types, constants, and utilities
• storage - Chrome storage API helpers and state management
• ui - Shared React components and Tailwind utilities
• env - Environment variable management

Development Tools:

• vite-config - Shared Vite configuration
• tsconfig - TypeScript configurations
• dev-utils - Development utilities and Chrome extension helpers
• hmr - Hot module reload for development
• zipper - Extension packaging tools

Features:

• i18n - Internationalization with type safety
• module-manager - Enable/disable extension modules
• e2e - End-to-end testing setup

Troubleshooting

Hot Module Reload Issues

If changes aren't reflected during development:

1. Restart the development server: Ctrl+C then pnpm dev
2. If you encounter grpc errors, kill the turbo process and restart
3. Reload the extension in Chrome extensions page

Import Resolution Issues

If using WSL and imports aren't resolving correctly, ensure you've connected VS Code to WSL remotely using the Remote - WSL extension.

AI Integration Issues

If semantic analysis isn't working:

1. Verify your Azure OpenAI credentials in the options page
2. Check the background script console for API errors
3. Ensure your API key has appropriate permissions

Reference

• Chrome Extensions Documentation
• Vite Documentation
• Turborepo Documentation
• Azure OpenAI Service

---

Created by Oscar Wang | Built on the foundation of the Chrome Extension Boilerplate by Jonghakseo