Fylio (file:/// enhancer)

What this extension does

Replaces plain file:/// directory listings in Chromium-based browsers with a Finder-style UI:

• Grid and List views
• Breadcrumb navigation
• Light and Dark themes
• Sort by name/type/date
• Color-coded file types

How to load the extension in Chrome/Brave/Edge (developer/unpacked)

1. Save the project folder (e.g. file-finder/) locally.
2. Open Chrome (or Brave/Edge) and go to chrome://extensions/.
3. Enable Developer mode (top-right).
4. Click Load unpacked and pick the project folder (the folder that contains manifest.json).
5. IMPORTANT: After loading, open the extension's details page (click "Details" on the extension card) and enable Allow access to file URLs. This is required for the extension to run on file:/// pages.
6. Visit a file:/// directory (for example file:///C:/Users/You/Downloads/ on Windows or file:///Users/you/Downloads/ on macOS/Linux).
   • If you used the extension without the "Allow access to file URLs" toggle, it will not run. Enable that toggle and reload the file:/// page.

Notes & troubleshooting

• The extension expects a simple directory listing (links). It is intentionally conservative and will not run on complex web pages.
• If the extension doesn't seem to inject the UI:
  • Make sure "Allow access to file URLs" is enabled for the extension (chrome://extensions > Details).
  • Reload the file:/// page.
  • Check the console (DevTools) for errors (Right-click page > Inspect).
• Publishing to the Chrome Web Store may require additional policy checks. Also, Chrome users must still enable "Allow access to file URLs" manually — there is no API to force that setting for security reasons.
• If you want more features (thumbnails, file size parsing via a native helper, right-click actions, in-extension preview), we can extend this with a backend/native host or add more complex heuristics.

Code structure

• manifest.json — MV3 manifest
• CODE_STRUCTURE.md — Detailed documentation of the modular structure

JavaScript Modules (content/)

• storage.js — Storage management (Chrome storage API + localStorage fallback)
• utils.js — Helper functions (parsing, classification, icons)
• ui-builder.js — UI construction and state management
• search.js — Real-time search filtering
• init.js — Extension entry point

CSS Stylesheets (content/)

• theme.css — Variables, base styles, and themes (light/dark)
• header.css — Header and breadcrumb styling
• controls.css — Control buttons and sort dropdowns
• file-list.css — File list items and type-based colors
• responsive.css — Mobile and responsive design

See CODE_STRUCTURE.md for a detailed guide on module responsibilities and how to extend the codebase.