示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载本篇技术指南以 chrome-extensions-samples 仓库存档目录_archive/apps/samples/storage下的 Storage simple test 示例为主体完整讲解 Chrome AppsManifest V2 时代中如何基于 WebKit 前缀的 Filesystem API 申请持久化配额、查询配额用量以及向文件系统写入大体积测试文件。读完本文你将掌握webkitStorageInfo.requestQuota、webkitStorageInfo.queryUsageAndQuota、webkitRequestFileSystem与FileWriter的完整调用链并能在实际 Chrome App 中复刻这套存储测试方案。示例概览一个极简的存储测试应用_archive/apps/samples/storage是一个非常简单的基础应用原文档原文为 A very basic application其核心目的是验证 Chrome Apps 的文件系统能力允许你请求一个文件系统request a filesystem、向其写入一个示例文件write a sample file并查询当前可用字节数query how many bytes are available。整个示例只由 5 个文件构成文件职责manifest.json应用清单声明权限与应用后台入口background.js应用启动入口创建主窗口main.html界面骨架提供三个测试按钮与日志区main.js核心逻辑配额申请、配额查询、文件系统写入assets/screenshot_1280_800.png运行效果截图原文档将其归类为 Filesystem、Runtime、Window 三类 API 的演示Runtimechrome.app.runtime.onLaunched负责接收启动事件Windowchrome.app.window.create负责创建应用窗口Filesystem 则是本次演示的主角。清单文件unlimitedStorage 权限的作用在 manifest.json 中应用声明了唯一一项权限unlimitedStorage{ name: Syncable Storage Sample, version: 1.1, manifest_version: 2, minimum_chrome_version: 23, app: { background: { scripts: [background.js] } }, permissions: [ unlimitedStorage ] }几个值得注意的细节manifest_version: 2与minimum_chrome_version: 23这是一个面向 Chrome 23 的 Manifest V2 Chrome 应用Chrome App。示例存放于_archive目录属于已归档的旧形态扩展/应用项目运行前提是当时支持 WebKit 前缀存储 API 的 Chrome 版本。unlimitedStorage权限这是本示例的关键权限。它解除了 Chrome 对本地数据存储的默认配额限制。有了它webkitStorageInfo.requestQuota的请求才可能被授予远超默认上限的持久化空间。在截图日志中可以看到Granted 31457280即 30 MB这正是代码中BIG_FILE所请求的字节数。后台脚本作为应用入口app.background.scripts声明了background.jsChrome 应用在启动时执行该脚本随后通过 Runtime/Window API 创建可见窗口。应用入口background.js 的窗口创建流程background.js 展示了 Chrome App 最基础的启动模式chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create(main.html, { id: mainwin, innerBounds: { width: 400, height: 500 } }); });chrome.app.runtime.onLaunched应用被启动时触发的运行时事件对应原文档列出的 Runtime API。chrome.app.window.create(main.html, ...)以main.html为内容创建应用窗口对应原文档列出的 Window API并指定窗口id为mainwin、内部尺寸 400×500。核心逻辑逐行解析main.js 的三段式存储测试main.js 是全部技术精髓所在。它先在文件顶部定义一个大文件基准值var BIG_FILE 30 * 1024 * 1024; // 30 MBBIG_FILE同时被用作配额申请量与待写入文件的目标大小全示例围绕这 30 MB 展开。随后在onload中为 main.html 的三个按钮绑定了三个处理函数日志统一输出到pre idlog区域1. 申请配额webkitStorageInfo.requestQuotadocument.getElementById(request-quota).onclick function() { window.webkitStorageInfo.requestQuota( window.PERSISTENT, BIG_FILE, function(grantedBytes) { log(Granted grantedBytes) }, function(e) { log(Error: e); }); };存储类型传入window.PERSISTENT表示申请持久化存储PERSISTENT与TEMPORARY是 WebKit 存储的两种类型前者需显式申请配额且数据不会被浏览器自动回收后者则由浏览器按需逐出。请求字节数BIG_FILE即 30 MB。成功回调返回实际被授予的字节数grantedBytes。在示例截图中可以看到输出Granted 31457280恰好等于申请的 30 MB说明在unlimitedStorage权限下配额被足额批准。失败回调打印错误对象。2. 查询配额与用量webkitStorageInfo.queryUsageAndQuotadocument.getElementById(query-quota).onclick function() { window.webkitStorageInfo.queryUsageAndQuota( window.PERSISTENT, function(usage, quota) { log(usage usage quota quota) }, function(e) { log(Error: e); }); };同样针对PERSISTENT存储类型查询。成功回调返回两个参数usage已使用字节数与quota配额字节数。在截图中写入测试文件之前的查询输出为usage 0 quota 351988776960——用量为 0而配额高达约 351 GB约 327 GB这是unlimitedStorage生效后的实际配额上限。3. 申请文件系统并写入文件webkitRequestFileSystem FileWriter这是示例中最复杂的部分完整展示了申请文件系统 → 创建文件 → 创建写入器 → 写入大文件的完整链路document.getElementById(request-filesystem).onclick function() { window.webkitRequestFileSystem( PERSISTENT, BIG_FILE, function(fs) { log(Filesystem: fs); fs.root.getFile( test.txt, {create: true, exclusive: true}, function(fileEntry) { log(fileEntry: fileEntry); fileEntry.createWriter(function(fileWriter) { log(fileWriter: fileWriter); fileWriter.onwriteend function(e) { log(Write completed.); }; fileWriter.onerror function(e) { log(Write failed: e.toString()); }; var bb new WebKitBlobBuilder(); for (var i 0; i BIG_FILE/50; i) { bb.append(01234567890123456789012345678901234567890123456789); } fileWriter.write(bb.getBlob(text/plain)); }, function(e) { log(Error: e); }); }); }, function(e) {log(Error e);}); };逐步拆解这条调用链window.webkitRequestFileSystem(PERSISTENT, BIG_FILE, successCallback, errorCallback)申请一个持久化文件系统。第二个参数BIG_FILE是希望分配的空间大小成功回调收到DOMFileSystem对象fs截图日志中显示为[object DOMFileSystem]。fs.root.getFile(test.txt, {create: true, exclusive: true}, ...)在文件系统根目录创建文件test.txt。create: true表示不存在时创建exclusive: true表示文件已存在则报错避免覆盖。成功回调收到FileEntry截图日志中显示为[object FileEntry]。fileEntry.createWriter(...)为文件创建写入器FileWriter截图日志中显示为[object FileWriter]并注册两个事件onwriteend写入完成后输出Write completed.onerror写入失败时输出错误信息。构造 Blob 并写入使用WebKitBlobBuilder将BIG_FILE/50次拼接的 50 字节字符串组装成约 30 MB 的 Blob然后调用fileWriter.write(bb.getBlob(text/plain))一次性写入。注意源码中的注释提示在 Chrome 12 中应使用window.WebKitBlobBuilder这体现了该示例对早期 Chrome 版本兼容性的考虑。写入完成后再次点击 Query QuotaqueryUsageAndQuota即可反映文件占用截图日志中可见写入后usage 162等输出变化从而完成写入—校验的闭环验证。界面层main.html 的按钮与日志输出main.html 结构极其精简button idrequest-quotaRequest Quota/button button idquery-quotaQuery Quota/button button idrequest-filesystemRequest FileSystem and write file/button pre idlog/pre三个按钮的id与 main.js 中的getElementById一一对应日志通过log()函数以追加方式写入pre元素function log(message) { document.getElementById(log).textContent message \n; }扩展观察同目录下的姊妹示例与存储 API 家族在_archive/apps/samples目录下还有与存储相关的姊妹示例可作为本主题的延伸阅读syncfs-editor_archive/apps/samples/syncfs-editor/README.md一个基于chrome.syncFileSystemAPI 的云备份文本编辑器展示文件系统数据与云端同步的能力与本文示例的本地持久化存储形成互补。storage 的 MV2 扩展形态在_archive/mv2/api/storage/stylizr/中可看到面向普通扩展的chrome.storage用法基于 JSON 的键值存储与本文基于 File System 的二进制文件存储属于不同层级——前者适合配置与轻量数据后者适合大文件读写。历史定位与适用前提需要说明的是本示例存放于_archive归档目录其技术栈webkitStorageInfo、webkitRequestFileSystem、WebKitBlobBuilder等 WebKit 前缀 API 以及 Chrome App 形态属于 Manifest V2 时代的能力。从仓库结构可以推断当前仓库的活跃示例api-samples/、functional-samples/等目录已转向 Manifest V3 与新一代 Web 平台 API如 File System Access API、chrome.storage。因此本文内容适合以下场景理解 Chrome Apps 存储架构的历史实现、维护存量 Chrome App 代码或研究 Web 存储配额模型的设计演进。在实际新项目中应优先选用当前受支持的存储方案。小结_archive/apps/samples/storage用不到 60 行 JavaScript 完整演示了 Chrome Apps 文件系统的三大核心能力配额申请webkitStorageInfo.requestQuota、配额/用量查询webkitStorageInfo.queryUsageAndQuota与文件系统写入webkitRequestFileSystem→FileEntry.createWriter→FileWriter.write。配合unlimitedStorage权限示例在截图中呈现了申请 30 MB → 获得足额授权 → 查询超大配额 → 写入 30 MB 测试文件的完整可验证流程。对于想要回顾 Chrome App 存储机制、或为存量应用编写存储自检工具的开发者而言这是一个麻雀虽小、五脏俱全的参考实现。赞分享示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载相关推荐Chrome Apps 官方示例全览chrome-extensions-samples 中已归档的 Chrome Apps 平台示例指南Chrome Apps 官方示例全览chrome extensions samples 中已归档的 Chrome Apps 平台示例指南 本指南以 chrom示例工程Chrome Apps UDP 网络访问实战基于 chrome-extensions-samples 的 UDP Echo 客户端示例解析Chrome Apps UDP 网络访问实战基于 chrome extensions samples 的 UDP Echo 客户端示例解析 本指南以 chro示例工程EEVE-Korean-Instruct模型评估报告66.48分平均性能的全面分析EEVE Korean Instruct模型评估报告66.48分平均性能的全面分析 EEVE Korean Instruct 10.8B v1.0是一款专为韩示例工程上一篇多平台游戏DLC管理利器CreamInstaller的智能解锁方案解析下一篇如何安装与配置satellite.nvim5分钟打造个性化Neovim滚动体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
