OPFS Explorer EN
Hasan Bayat · Firefox
A powerful DevTools extension to inspect, manage, and edit files in the Origin Private File System (OPFS)
截图
简介
OPFS Explorer - The Missing DevTools Panel for Origin Private File System
GitHub: https://github.com/hasanbayatme/opfs-explorer
The Origin Private File System (OPFS) is a powerful browser API for high-performance file storage, but browsers don't provide any way to see what's inside. OPFS Explorer fills this gap by adding a dedicated panel to Chrome DevTools.
WHAT'S NEW IN v0.2.0:
• JSON Formatting - One-click "Format" button with configurable indentation and key sorting
• On-Demand Directory Sizes - Calculate a folder's own size or its full recursive size, right from the context menu
• Settings Panel - Configure JSON formatting and directory-size behavior
• Duplicate & Collapse All - Duplicate any file/folder in place, or collapse the whole tree in one click
SECURITY HIGHLIGHTS:
• NO host permissions - doesn't access any websites
• NO content scripts - no code injected into pages
• ONLY permission: clipboard for "Copy Path" feature
• Uses DevTools native inspectedWindow.eval() API
KEY FEATURES:
📂 Visual File Tree - Browse directories with file sizes and type icons
📝 Code Editor - Syntax highlighting for JSON, JS, TS, HTML, CSS, and more
🧮 On-Demand Directory Sizes - Calculate a folder's own size or its full recursive size
� JSON Formatting - One-click reformatting with configurable indentation and key sorting
🖼 Image Preview - Zoom, rotate, and inspect images up to 5MB
📑 Markdown Support - Preview or edit .md files
✅ Multi-Selection - Ctrl+Click, Shift+Click, Ctrl+A with bulk delete/download
🖱 Drag & Drop - Upload files or reorganize your file structure (multi-drag)
⚡ Full CRUD - Create, rename, duplicate, move, and delete files/folders
⬇ Download Files - Export from OPFS to your local machine
📊 Storage Stats - Monitor your OPFS quota usage
⚙ Settings Panel - Configure JSON formatting and directory-size behavior
⌨ Keyboard Shortcuts - 20+ shortcuts with platform-aware hints in context menus
🌗 Theme Support - Adapts to DevTools light/dark themes
♿ Fully Accessible - WCAG 2.1 AA with screen reader, keyboard, and high contrast support
PERFECT FOR:
• SQLite Wasm applications (sql.js, wa-sqlite, sqlite-wasm)
• Progressive Web Apps (PWAs) with offline storage
• File System Access API projects
• Browser-based IDEs and editors
• Any app using navigator.storage.getDirectory()
PRIVACY:
• Runs entirely locally - no external connections
• No data collection or telemetry
• Minimal permission (clipboard only)
• No content scripts or host permissions
• Open source: github.com/hasanbayatme/opfs-explorer
HOW TO USE:
1. Open any website using OPFS (https or localhost)
2. Open DevTools (F12)
3. Click the "OPFS Explorer" tab
4. Browse, edit, and manage your files!
OPFS Explorer 是做什么的
OPFS Explorer 是一款面向 Firefox 的开发者工具类扩展,主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是:A powerful DevTools extension to inspect, manage, and edit files in the Origin Private File System (OPFS)在Firefox 附加组件商店(AMO)上,它当前版本 0.2.0,约 104 名用户。
适合什么人用
从功能定位看,OPFS Explorer 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求,用浏览器自带功能也能凑合;但如果这件事每天都发生,装一个专门处理它的扩展通常比手动操作省事得多。
怎么安装 OPFS Explorer
- 打开Firefox 附加组件商店(AMO)上的官方页面;
- 点「添加到浏览器」并确认权限提示;
- 装好后在扩展列表里固定图标,方便随时开关。
本站只做索引与介绍,安装包来自官方商店。如果商店页面提示当前地区不可用,说明该扩展未在你所在区域上架。
常见问题
OPFS Explorer 是免费的吗?
OPFS Explorer 在Firefox 附加组件商店(AMO)免费提供下载。它是浏览器扩展,装上就能直接用,不需要注册账号。
OPFS Explorer 安全吗?
它只申请了 0 项权限,范围比较克制,没有申请「读取所有网站数据」这种大权限。
OPFS Explorer 支持哪些浏览器?
当前收录的版本来自Firefox 附加组件商店(AMO),适用于 Firefox。同一个扩展在其他商店可能有对应版本,但功能与版本号不一定相同。
怎么卸载 OPFS Explorer?
在扩展管理页找到 OPFS Explorer,点移除即可。它在本地保存的设置会一起清掉,不会残留数据。
权限清单 来自 manifest.json 原文
接口权限 2
clipboardWritedevtools







