# Project export: FactChecker Pro

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: UC Berkeley AI Hackathon 2025
- Tagline: A chrome extension to help you quickly verify a website's content. It conducts a google search on important claims and verifies them using the n most relevant sources, reducing misinformation.
- Devpost: https://devpost.com/software/factchecker-pro
- GitHub: https://github.com/0308ehub/AI-Hackathon#
- Team: 3 GitHub contributor(s) — Alan Wei (12 commits), Christy Cheung (8 commits), Ting-Yong Liu (2 commits)

## Devpost submission (written by the team)

No Devpost description available.

## README (from the GitHub repository)

# FactChecker Pro - Chrome Extension

A Google Chrome extension that fact-checks statements in real-time, similar to Grammarly but for factual accuracy. The extension analyzes text on web pages and highlights potentially inaccurate or unsourced factual claims with suggestions for improvement.

## Features

- **Real-time Fact Checking**: Automatically scans web pages for factual statements
- **Smart Pattern Recognition**: Identifies claims about statistics, dates, studies, and more
- **Visual Highlighting**: Highlights potentially problematic statements with red underlines
- **Interactive Tooltips**: Hover over highlights to see detailed explanations and suggestions
- **Clickable Source Links**: Direct links to verify information with original sources
- **Customizable Settings**: Toggle features on/off and adjust behavior
- **Statistics Tracking**: Monitor how many facts have been checked and issues found
- **Modern UI**: Clean, professional interface similar to Grammarly

## Installation

### Method 1: Load as Unpacked Extension (Development)

1. Clone or download this repository
2. Open Chrome and navigate to `chrome://extensions/`
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the extension folder
5. The extension should now appear in your extensions list

### Method 2: Create Icons (Required)

Before using the extension, you need to create icon files:

1. Create three PNG icon files:
   - `icons/icon16.png` (16x16 pixels)
   - `icons/icon48.png` (48x48 pixels)
   - `icons/icon128.png` (128x128 pixels)

2. You can use any image editor or online icon generator to create these icons

## Usage

1. **Enable the Extension**: Click the FactChecker Pro icon in your Chrome toolbar
2. **Browse Normally**: The extension will automatically scan web pages for factual statements
3. **Review Highlights**: Look for red-highlighted text that may contain factual issues
4. **Hover for Details**: Mouse over highlighted text to see explanations and suggestions
5. **Adjust Settings**: Use the popup to customize the extension's behavior

## How It Works

### Fact Detection
The extension uses pattern matching to identify potential factual statements:

- **Statistics**: Numbers with percentages, millions, billions
- **Dates**: Years, dates, historical references
- **Comparative Claims**: "more than", "less than", "higher", "lower"
- **Absolute Statements**: "always", "never", "100%", "every"
- **Research Claims**: "studies show", "research indicates"
- **Measurements**: Quantities with units (miles, pounds, degrees)
- **Institutions**: Universities, colleges, research centers
- **Historical Events**: Time-based references

### Fact Checking Process
1. **Text Analysis**: Scans page content for factual patterns
2. **Statement Extraction**: Identifies individual factual claims
3. **Issue Detection**: Checks for common factual problems
4. **Highlighting**: Marks problematic statements with visual indicators
5. **Suggestions**: Provides improvement recommendations
6. **Source Verification**: Links to original sources for fact verification

### Source Links
The extension provides direct links to verify information with original sources:

- **Wikipedia**: Links to specific articles for reference checking
- **World Bank**: Links to data pages for economic and demographic facts
- **Google Fact Check**: Links to the fact-checking database
- **OpenAI**: Links to research resources
- **Google Natural Language**: Links to API documentation

Users can click on source links in tooltips to open the original sources in new tabs for verification.

## Settings

- **Auto-check facts**: Automatically scan new content
- **Highlight issues**: Show visual indicators for problems
- **Show suggestions**: Display improvement recommendations

## Current Limitations

This is a demonstration version with mock fact-checking. For production use, you would integrate with:

- **Snopes API**: For fact-checking verification
- **FactCheck.org API**: For political fact-checking
- **Google Fact Check API**: For general fact verification
- **OpenAI API**: For AI-powered fact analysis
- **Wikipedia API**: For reference checking

## Development

### File Structure
```
├── manifest.json          # Extension configuration
├── popup.html            # Extension popup interface
├── popup.css             # Popup styling
├── popup.js              # Popup functionality
├── content.js            # Content script for page analysis
├── background.js         # Background service worker
├── styles.css            # Content script styling
├── icons/                # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md             # This file
```

### Adding Real Fact-Checking APIs

To integrate with real fact-checking services, modify the `mockFactCheck` function in `content.js`:

```javascript
async function realFactCheck(statement) {
    // Example: Snopes API integration
    const response = await fetch('https://api.snopes.com/v2/fact-check/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({ query: statement })
    });
    
    const data = await response.json();
    return {
        hasIssues: data.rating === 'false' || data.rating === 'mixture',
        issues: data.explanation ? [data.explanation] : [],
        suggestions: data.suggestions || [],
        confidence: data.confidence || 0.8
    };
}
```

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

## License

This project is open source and available under the MIT License.

## Support

For issues or questions, please open an issue on the GitHub repository.

---

**Note**: This extension is for educational and demonstration purposes. Always verify information from multiple reliable sources for important decisions. 

## Detected evidence (automated analysis)

Indexed codebase: 15 recognized source files, 140 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (16 of 16)

```
background.js
content.js
demo.html
FACT_CHECKING_SOURCES.md
fact-checking-service.js
HIGHLIGHTING_SYSTEM.md
install.md
manifest.json
options.html
options.js
popup.css
popup.html
popup.js
README.md
styles.css
test-links.html
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- final updates
- finished debugging
- used anthropic to fix the source issue, it has a lot more accurate sources now but it's just not giving the right ratings despite the right percentages
- changes to demo
- slightly faster processing
- updated sources
- css changes
- made logo circular
- debugged source text button
- updated cursor UI
- fixed the extension css overriding issue
- extended hover and added source links
- hopefully working version
- hopefully fixed css disruption issues
- updates to both UI and backend content reading
- updated backend code
- debugged rescanning issue
- update ui
- fixed popup image
- added image to options_page

## Key source files (fetched from GitHub, selected and truncated for size)

### install.md

```markdown
# FactChecker Pro - Installation Guide

## Quick Installation Steps

### 1. Create Extension Icons (Required)

Before installing, you need to create icon files. You can use any image editor or online tool:

**Option A: Use an Online Icon Generator**
1. Go to [Favicon.io](https://favicon.io/) or [Canva](https://canva.com/)
2. Create a simple icon (suggested: a checkmark or fact-check symbol)
3. Download in PNG format
4. Create three sizes: 16x16, 48x48, and 128x128 pixels

**Option B: Use a Simple Text Icon**
1. Create a simple text-based icon using any image editor
2. Use a fact-checking symbol like ✓, 🔍, or 📊
3. Save as PNG files with the required sizes

**Option C: Download Sample Icons**
You can find free icons on:
- [Flaticon](https://www.flaticon.com/)
- [Icons8](https://icons8.com/)
- [Feather Icons](https://feathericons.com/)

### 2. Place Icons in the Extension Folder

Put your icon files in the `icons/` folder:
```
icons/
├── icon16.png  (16x16 pixels)
├── icon48.png  (48x48 pixels)
└── icon128.png (128x128 pixels)
```

### 3. Load the Extension in Chrome

1. Open Google Chrome
2. Navigate to `chrome://extensions/`
3. Enable "Developer mode" (toggle in top right corner)
4. Click "Load unpacked"
5. Select the extension folder (the folder containing `manifest.json`)
6. The extension should now appear in your extensions list

### 4. Test the Extension

1. Click the FactChecker Pro icon in your Chrome toolbar
2. Open the demo page: `file:///path/to/your/extension/demo.html`
3. You should see red highlights on factual statements
4. Hover over highlights to see tooltips with explanations

## Troubleshooting

### Extension Not Loading
- Make sure all files are in the correct folder structure
- Check that `manifest.json` is valid JSON
- Ensure icon files exist and are the correct sizes
- Try refreshing the extensions page

### No Highlights Appearing
- Check that the extension is enabled
- Refresh the webpage after loading the extension
- Open the browser console (F12) to check for errors
- Try the demo page to test functionality

### Icons Not Showing
- Verify icon files are PNG format
- Check file sizes match requirements (16x16, 48x48, 128x128)
- Ensure file names match exactly: `icon16.png`, `icon48.png`, `icon128.png`

## File Structure

Your extension folder should look like this:
```
FactChecker-Pro/
├── manifest.json
├── popup.html
├── popup.css
├── popup.js
├── content.js
├── background.js
├── styles.css
├── options.html
├── options.js
├── demo.html
├── README.md
├── install.md
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png
```

## Next Steps

After installation:
1. Customize settings in the extension popup
2. Access advanced options via the options page
3. Test on various websites
4. Consider integrating real fact-checking APIs for production use

## Support

If you encounter issues:
1. Check the browser console for error messages
2. Verify all files are present and correctly named
3. Try reinstalling the extens
[truncated — 39 more characters]
```

### HIGHLIGHTING_SYSTEM.md

```markdown
# FactChecker Pro - New Highlighting System

## 🎯 **What's New: Color-Coded Fact Checking**

The extension now provides **visual fact-checking** with color-coded underlines and accuracy scores, similar to Grammarly's grammar checking but for factual accuracy.

## 🎨 **Color-Coded Underlines**

### **🟢 Green Underlines - Accurate Facts**
- **When**: Facts verified as accurate (confidence > 70%)
- **Examples**: 
  - "Stanford University was founded in 1885" ✅
  - "The US declared independence on July 4, 1776" ✅
  - "China has a population of over 1.4 billion people" ✅

### **🔴 Red Underlines - Inaccurate Facts**
- **When**: Facts found to be false or inaccurate (confidence < 50%)
- **Examples**:
  - "100% of people believe everything on the internet" ❌
  - "All politicians are corrupt" ❌
  - "The Earth is flat" ❌

### **🟡 Yellow Underlines - Mixed/Unclear Facts**
- **When**: Facts with mixed accuracy or unclear verification (confidence 40-70%)
- **Examples**:
  - "Studies show coffee makes you live longer" ⚠️
  - "Apple products are always more expensive" ⚠️

### **⚫ Gray Underlines - Unverified Facts**
- **When**: Facts that couldn't be verified with available sources
- **Examples**:
  - "Nobody has ever succeeded without working hard" ❓
  - "Every person who exercises lives to 100" ❓

## 📊 **Hover Tooltips with Accuracy Scores**

When you hover over any underlined fact, you'll see:

### **🎯 Accuracy Score**
- **High (80%+)**: Green badge with "Accurate"
- **Medium (60-79%)**: Yellow badge with "Likely Accurate"  
- **Low (40-59%)**: Orange badge with "Mixed/Unclear"
- **Very Low (<40%)**: Red badge with "Inaccurate"

### **📋 Detailed Information**
- **Issues Found**: Specific problems with the fact
- **Suggestions**: How to improve or verify the statement
- **Sources**: Which fact-checking services were used
- **Explanation**: Brief summary of the verification

## 🔧 **How It Works**

### **1. Fact Detection**
The extension scans web pages for factual statements using pattern matching:
- Statistics and percentages
- Historical dates and events
- Research claims ("studies show")
- Absolute statements ("always", "never")
- Institutional references
- Comparative claims

### **2. Multi-Source Verification**
Each fact is checked against multiple sources:
- **Wikipedia API**: Historical facts, institutions
- **World Bank API**: Economic statistics
- **Google Fact Check API**: General verification (if configured)
- **OpenAI API**: Complex analysis (if configured)

### **3. Accuracy Scoring**
Facts receive confidence scores based on:
- Source reliability (Wikipedia: 70%, World Bank: 80%, etc.)
- Verification success rate
- Data consistency across sources
- Recency of information

### **4. Visual Highlighting**
Based on confidence scores:
- **>70% confidence + no issues** = Green underline
- **<50% confidence + issues** = Red underline  
- **40-70% confidence** = Yellow underline
- **<40% confidence + no sources** = Gray underline

## 🎯 **User Exp
[truncated — 1456 more characters]
```

### background.js

```javascript
// Background service worker for FactChecker Pro
chrome.runtime.onInstalled.addListener(() => {
    // Initialize default settings
    chrome.storage.local.set({
        isEnabled: true,
        autoCheck: true,
        highlightIssues: true,
        showSuggestions: true,
        factsChecked: 0,
        issuesFound: 0
    });
});

// Handle extension icon click
chrome.action.onClicked.addListener((tab) => {
    // This will open the popup automatically due to manifest configuration
});

// Listen for messages from content scripts
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'updateStats') {
        // Forward stats update to popup if it's open
        chrome.runtime.sendMessage(request);
    }
});

// Handle tab updates to reinitialize content script if needed
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && tab.url && tab.url.startsWith('http')) {
        // Content script will automatically run due to manifest configuration
    }
}); 
```

### popup.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FactChecker Pro</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <img src="icons/logo.png" alt="FactChecker Pro" class="logo-img">
                <h1>FactChecker Pro</h1>
            </div>
        </header>
        
        <main>
            <div class="status-section">
                <div class="status-indicator">
                    <div class="status-dot active"></div>
                    <span class="status-text">Active</span>
                </div>
                <button id="toggleBtn" class="toggle-btn">Disable</button>
            </div>
            
            <div class="stats-section">
                <div class="stat-item">
                    <span class="stat-label">Facts Checked</span>
                    <span id="factsChecked" class="stat-value">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Issues Found</span>
                    <span id="issuesFound" class="stat-value">0</span>
                </div>
            </div>
            
            <div class="settings-section">
                <h3>Settings</h3>
                <div class="setting-item">
                    <label for="autoCheck">Auto-check facts</label>
                    <input type="checkbox" id="autoCheck" checked>
                </div>
                <div class="setting-item">
                    <label for="highlightIssues">Highlight issues</label>
                    <input type="checkbox" id="highlightIssues" checked>
                </div>
                <div class="setting-item">
                    <label for="showSuggestions">Show suggestions</label>
                    <input type="checkbox" id="showSuggestions" checked>
                </div>
            </div>
        </main>
        
        <footer>
            <button id="clearStats" class="clear-btn">Clear Stats</button>
            <button id="openOptions" class="options-btn">Options</button>
        </footer>
    </div>
    
    <script src="popup.js"></script>
</body>
</html> 
```

### test-links.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fact Checker Source Links Test</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .test-statement {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .feature-list {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <h1>Fact Checker Source Links Test</h1>
    
    <div class="test-section">
        <h2>Test Statements</h2>
        
        <div class="test-statement">
            <p>China has a population of 1.4 billion people.</p>
        </div>
        
        <div class="test-statement">
            <p>Stanford University was founded in 1885.</p>
        </div>
        
        <div class="test-statement">
            <p>The United States has the world's largest economy.</p>
        </div>
        
        <div class="test-statement">
            <p>Scientists discovered that the Earth orbits the Sun.</p>
        </div>
    </div>
    
    <div class="test-section">
        <h2>Expected Behavior</h2>
        <div class="feature-list">
            <h3>Hover Behavior:</h3>
            <ul>
                <li>Hover over highlighted text to see tooltips</li>
                <li>Tooltips stay visible for 2 seconds after leaving the text</li>
                <li>Tooltips remain open when hovering over them</li>
                <li>Source links are clickable and open in new tabs</li>
            </ul>
            
            <h3>Source Links:</h3>
            <ul>
                <li>Wikipedia sources link to specific articles</li>
                <li>World Bank sources link to data pages</li>
                <li>Other sources link to their respective websites</li>
                <li>Links have hover effects and visual feedback</li>
            </ul>
            
            <h3>Visual Indicators:</h3>
            <ul>
                <li>Source links are blue and more prominent than badges</li>
                <li>Links have hover animations (lift effect)</li>
                <li>Tooltip shows "(click to verify)" hint</li>
                <li>Smooth animations for tooltip appearance</li>
            </ul>
        </div>
    </div>

    <script src="fact-checking-service.js"></script>
    <script src="content.js"></script>
</body>
</html> 
```

### popup.css

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #333;
    min-height: 400px;
}

.container {
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    text-align: center;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.logo-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.logo h1 {
    font-size: 18px;
    font-weight: 600;
}

main {
    padding: 20px;
}

.status-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dc3545;
    transition: background 0.3s ease;
}

.status-dot.active {
    background: #28a745;
}

.status-text {
    font-weight: 500;
    font-size: 14px;
}

.toggle-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.toggle-btn:hover {
    background: #0056b3;
}

.toggle-btn.disabled {
    background: #6c757d;
}

.stats-section {
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    font-size: 14px;
    color: #6c757d;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #007bff;
}

.settings-section h3 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item label {
    font-size: 14px;
    color: #495057;
    cursor: pointer;
}

.setting-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007bff;
    cursor: pointer;
}

footer {
    padding: 15px 20px;
    background: #f8f9fa;
    display: flex;
    gap: 10px;
}

.clear-btn, .options-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.clear-btn {
    background: #dc3545;
    color: white;
}

.clear-btn:hover {
    background: #c82333;
}

.options-btn {
    background: #6c757d;
    color: white;
}

.options-btn:hover {
    background: #5a6268;
} 
```

### popup.js

```javascript
document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('toggleBtn');
    const statusDot = document.querySelector('.status-dot');
    const statusText = document.querySelector('.status-text');
    const factsChecked = document.getElementById('factsChecked');
    const issuesFound = document.getElementById('issuesFound');
    const autoCheck = document.getElementById('autoCheck');
    const highlightIssues = document.getElementById('highlightIssues');
    const showSuggestions = document.getElementById('showSuggestions');
    const clearStatsBtn = document.getElementById('clearStats');
    const openOptionsBtn = document.getElementById('openOptions');

    // Load saved settings and stats
    loadSettings();
    loadStats();

    // Toggle extension on/off
    toggleBtn.addEventListener('click', function() {
        chrome.storage.local.get(['isEnabled'], function(result) {
            const newState = !result.isEnabled;
            chrome.storage.local.set({ isEnabled: newState }, function() {
                updateToggleUI(newState);
                // Send message to content script
                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                    chrome.tabs.sendMessage(tabs[0].id, {
                        action: 'toggleExtension',
                        enabled: newState
                    });
                });
            });
        });
    });

    // Settings change handlers
    autoCheck.addEventListener('change', function() {
        saveSetting('autoCheck', this.checked);
    });

    highlightIssues.addEventListener('change', function() {
        saveSetting('highlightIssues', this.checked);
    });

    showSuggestions.addEventListener('change', function() {
        saveSetting('showSuggestions', this.checked);
    });

    // Clear stats
    clearStatsBtn.addEventListener('click', function() {
        chrome.storage.local.set({
            factsChecked: 0,
            issuesFound: 0
        }, function() {
            loadStats();
        });
    });

    // Open options page
    openOptionsBtn.addEventListener('click', function() {
        chrome.runtime.openOptionsPage();
    });

    function loadSettings() {
        chrome.storage.local.get([
            'isEnabled',
            'autoCheck',
            'highlightIssues',
            'showSuggestions'
        ], function(result) {
            const isEnabled = result.isEnabled !== false; // Default to true
            updateToggleUI(isEnabled);
            
            autoCheck.checked = result.autoCheck !== false; // Default to true
            highlightIssues.checked = result.highlightIssues !== false; // Default to true
            showSuggestions.checked = result.showSuggestions !== false; // Default to true
        });
    }

    function loadStats() {
        chrome.storage.local.get(['factsChecked', 'issuesFound'], function(result) {
            factsChecked.textContent = result.factsChecked || 0;
            issuesFound.textContent = result.issuesFound || 0;
        });
    }

    function updateToggleUI(isEnabled) {
        if (isEnabled) {
            toggleBtn.textContent = 'Disable';
            toggleBtn.classList.remove('disabled');
            statusDot.classList.add('active');
            statusText.textContent = 'Active';
        } else {
            toggleBtn.textContent = 'Enable';
            toggleBtn.classList.add('disabled');
            statusDot.classList.remove('active');
            statusText.textContent = 'Inactive';
        }
    }

    function saveSetting(key, value) {
        chrome.storage.local.set({ [key]: value }, function() {
            // Send updated settings to content script
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    action: 'updateSettings',
                    settings: { [key]: value }
                });
            });
        });
    }

    // Listen for stats updates from content script
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.action === 'updateStats') {
            loadStats();
        }
    });
}); 
```

### styles.css

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

/* FactChecker Pro Styles - Completely non-disruptive */

/* Highlight styles for factual statements - zero layout impact */
.factchecker-highlight {
    /* Only add a border-bottom, nothing else */
    border-bottom: 2px solid;
    cursor: help;
    /* Force inherit ALL original properties */
    all: inherit;
    /* Override only what we need */
    border-bottom: 2px solid !important;
    cursor: help !important;
    /* Ensure no layout disruption */
    display: inline !important;
    position: static !important;
    z-index: auto !important;
    /* Remove any potential spacing issues */
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    /* Prevent any text wrapping or breaking */
    white-space: inherit !important;
    word-break: inherit !important;
    word-wrap: inherit !important;
    overflow-wrap: inherit !important;
    hyphens: inherit !important;
    /* Ensure no font changes */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-variant: inherit !important;
    text-transform: inherit !important;
    text-decoration: inherit !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    text-indent: inherit !important;
    /* Ensure no color changes */
    color: inherit !important;
    background: transparent !important;
    /* Prevent any box model changes */
    box-sizing: inherit !important;
    vertical-align: inherit !important;
    text-align: inherit !important;
    direction: inherit !important;
    unicode-bidi: inherit !important;
}

.factchecker-highlight.true {
    border-bottom-color: #28a745 !important;
}

.factchecker-highlight.false {
    border-bottom-color: #dc3545 !important;
}

.factchecker-highlight.mixed {
    border-bottom-color: #ffc107 !important;
}

.factchecker-highlight.unverified {
    border-bottom-color: #6c757d !important;
}

/* Hover effects - minimal */
.factchecker-highlight:hover {
    cursor: help !important;
    background-color: rgba(128, 128, 128, 0.15) !important;
    border-radius: 2px !important;
    transition: background-color 0.2s ease !important;
}

/* Tooltip styles */
.factchecker-tooltip {
    position: fixed !important;
    font-family: 'Poppins', sans-serif !important;
    background: #2c3e50;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    z-index: 999999 !important;
    opacity: 0;
    display: none;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    max-width: 300px;
    min-width: 250px;
    backdrop-filter: blur(2px);
    isolation: isolate;
    transform: translateX(-50%);
    will-change: transform, opacity;
    top: 0;
    left: 0;
    cursor: default;
    animation: tooltip-appear 0.3s ease-out;
}

@keyframes tooltip-appear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.factchecker-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    z-index: 999999 !important;
}

/* Arrow pointing up (tooltip above text) */
.factchecker-tooltip::after {
    top: 100%;
    border-top-color: #2c3e50;
}

/* Arrow pointing down (tooltip below text) */
.factchecker-tooltip.tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2c3e50;
}

/* Accuracy score styles */
.accuracy-score {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 13px;
}

.accuracy-score.high {
    color: #28a745;
}

.accuracy-score.medium {
    color: #ffc107;
}

.accuracy-score.low {
    color: #fd7e14;
}

.accuracy-score.unverified {
    color: #6c757d;
}

/* Source badges */
.source-badge {
    display: inline-block;
    background: #495057;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 4px;
    margin-bottom: 2px;
}

/* Source links */
.source-link,
.factchecker-highlight .source-link,
.factchecker-tooltip .source-link {
    display: inline-block;
    background: #007bff;
    color: white !important;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 4px;
    margin-bottom: 2px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
}

.source-link:hover,
.factchecker-highlight .source-link:hover,
.factchecker-tooltip .source-link:hover {
    background: #0056b3;
    color: white !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.source-link:active,
.factchecker-highlight .source-link:active,
.factchecker-tooltip .source-link:active {
    background: #004085;
    color: white !important;
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .factchecker-tooltip {
        max-width: 250px;
        min-width: 200px;
        font-size: 11px;
        padding: 8px;
    }
}

/* Animation for new highlights */
@keyframes factchecker-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style for the fact-checked attribute */
[data-fact-checked="true"] {
    /* This ensures we can identify already processed elements */
}

.tooltip-suggestions {
    font-family: 'Montserrat', sans-serif !important;
} 
```

### demo.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FactChecker Pro Demo</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        .demo-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background: #f8f9fa;
        }
        .demo-section h2 {
            color: #495057;
            margin-bottom: 15px;
        }
        .factual-statement {
            background: #fff;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #667eea;
            border-radius: 4px;
        }
        .note {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        .legend {
            background: #e3f2fd;
            border: 1px solid #bbdefb;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin: 8px 0;
            gap: 10px;
        }
        .legend-color {
            width: 20px;
            height: 4px;
            border-radius: 2px;
        }
        .legend-color.red { background: #dc3545; }
        .legend-color.green { background: #28a745; }
        .legend-color.yellow { background: #ffc107; }
        .legend-color.gray { background: #6c757d; }
    </style>
</head>
<body>
    <h1>FactChecker Pro Demo Page</h1>
    
    <div class="note">
        <strong>Note:</strong> This page contains various factual statements to test the FactChecker Pro extension. 
        Load the extension and refresh this page to see it in action!
    </div>

    <div class="legend">
        <h3>📊 Fact-Checking Legend</h3>
        <div class="legend-item">
            <div class="legend-color green"></div>
            <span><strong>Green Underline:</strong> Accurate facts (high confidence)</span>
        </div>
        <div class="legend-item">
            <div class="legend-color yellow"></div>
            <span><strong>Yellow Underline:</strong> Mixed/unclear facts (medium confidence)</span>
        </div>
        <div class="legend-item">
            <div class="legend-color red"></div>
            <span><strong>Red Underline:</strong> Inaccurate facts (low confidence)</span>
        </div>
        <div class="legend-item">
            <div class="legend-color gray"></div>
            <span><strong>Gray Underline:</strong> Unverified facts (no sources found)</span>
        </div>
        <p style="margin-top: 10px; font-size: 14px; color: #666;">
            <strong>Hover over any underlined text</strong> to see accuracy scores, sources, and suggestions!
        </p>
    </div>

    <div class="demo-section">
        <h2>✅ Likely Accurate Facts (Green Underlines)</h2>
        <div class="factual-statement">
            <p>Stanford University was founded in 1885 by Leland Stanford.</p>
        </div>
        <div class="factual-statement">
            <p>The United States declared independence on July 4, 1776.</p>
        </div>
        <div class="factual-statement">
            <p>China has a population of over 1.4 billion people.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>⚠️ Inaccurate Facts (Red Underlines)</h2>
        <div class="factual-statement">
            <p>Studies show that 100% of people believe everything they read on the internet.</p>
        </div>
        <div class="factual-statement">
            <p>The population of New York City is exactly 8.4 million people.</p>
        </div>
        <div class="factual-statement">
            <p>All politicians are corrupt and never tell the truth.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>🟡 Mixed/Unclear Facts (Yellow Underlines)</h2>
        <div class="factual-statement">
            <p>Studies show that drinking coffee makes you live longer.</p>
        </div>
        <div class="factual-statement">
            <p>Apple products are always more expensive than Android devices.</p>
        </div>
        <div class="factual-statement">
            <p>Electric cars are 50% more environmentally friendly than gasoline cars.</p>
        </div>
    </div>


    <div class="demo-section">
        <h2>📊 Statistics & Numbers</h2>
        <div class="factual-statement">
            <p>According to research, 95% of people believe everything they read on the internet.</p>
        </div>
        <div class="factual-statement">
            <p>The United States was founded in 1776 and immediately became the world's most powerful nation.</p>
        </div>
        <div class="factual-statement">
            <p>During World War II, all Germans supported Hitler's policies.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>🏛️ Institutional Claims</h2>
        <div class="factual-statement">
            <p>Stanford University has proven that meditation cures all diseases.</p>
        </div>
        <div class="factual-statement">
            <p>The World Health Organization says that all processed foods are dangerous.</p>
        </div>
        <div class="factual-statement">
            <p>NASA has discovered that aliens exist on every planet in our solar system.</p>
        </div>
    </div>

    <div class="note">
        <strong>Expected Behavior:</strong> 
        <ul style="margin-top: 10px;">
            <li><strong>Green underlines</strong> for facts verified as a
[truncated — 401 more characters]
```

[5 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]