Add browser extension for quick access to UrbanReflex city data

[Copilot]

Implements a lightweight Manifest V3 browser extension that displays HCMC city data (road context, weather/AQI, facilities, citizen reports) in a popup without requiring the full web application.

Implementation

Extension Structure

• manifest.json - Manifest V3 with storage and host permissions
• popup.html / popup.css - 400px popup UI with settings panel and 4 data sections
• popup.js - Location parsing (road names or lat/lon coordinates), API integration framework, mock data
• background.js - Service worker for lifecycle management
• Icons: 16/32/48/128px PNG assets

Key Features

• Configurable API endpoint via settings panel (stored in chrome.storage.sync)
• Dual input modes: road names (Nguyen Hue) or coordinates (10.7769,106.7009)
• Displays: road context, environment (weather/temp/AQI/humidity), nearby facilities (hospitals/schools/parks), citizen reports (active/resolved)
• Mock data implementation with clear integration points for production API

API Integration Points

// Current mock implementation - replace with actual endpoints
async fetchRoadContext(location) {
  const endpoint = `${this.apiEndpoint}/api/road-context`;
  // Mock: await this.delay(500); return mockData;
  // Production: 
  // const response = await fetch(endpoint, {
  //   method: 'POST',
  //   body: JSON.stringify(location)
  // });
  // return await response.json();
}

Documentation

• README.md - Feature overview, API integration guide, troubleshooting, roadmap
• INSTALLATION.md - Developer mode installation steps, first-time setup

Screenshots

Initial State

Settings Configuration

Data Display

Browser Compatibility

Chrome/Edge 88+, Brave, other Chromium-based browsers. Firefox requires Manifest V2 adaptation (future work).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• esm.ubuntu.com
  • Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title> [FEATURE] Browser Extension for Viewing UrbanReflex Data</issue_title>
<issue_description>## Feature Description
Provide a lightweight browser extension that can connect to an UrbanReflex backend and show the most important city data (road context, environment, infrastructure, citizen reports) in a small popup, so users can quickly inspect the state of HCMC without opening the full web application.

Key Use Cases

• When I am using my browser (for example, reading news or working on other tools) and I want to quickly understand the situation of a specific area in HCMC, I can click the UrbanReflex extension icon, enter or select a road/coordinates, and immediately see in one small popup: the road context, current weather and air quality, nearby public facilities (schools, hospitals, parks), and any active citizen reports, without opening the full UrbanReflex web application or calling the API manually.

</issue_description>

Comments on the Issue (you are @copilot in this section)

@minhe51805 ## Feedback Acknowledgment

Thank you for submitting this feature request!

Our Response

We appreciate you taking the time to describe the browser extension use case in detail. The idea of providing quick access to HCMC city data (road context, weather, air quality, nearby facilities, citizen reports) without opening the full web application is very practical and user-friendly.

Next Steps

We will consider this feature for development in the upcoming roadmap. Our team will evaluate the technical feasibility and prioritize accordingly.

Closing

Thanks again for your valuable contribution to UrbanReflex!

Best regards,</comment_new>

• Fixes [FEATURE] Browser Extension for Viewing UrbanReflex Data #14

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.