示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载导读本文以 chrome-extensions-samples 仓库中的 BrowsingData 示例 为骨架深入讲解如何通过 Manifest V3 扩展调用chrome.browsingDataAPI在弹出式面板Popup中一键清除用户的浏览历史、缓存、Cookie 等数据而无需用户手动访问浏览器的历史记录页面。读完本文你将掌握chrome.browsingData.remove的完整调用方式、时间范围解析逻辑、权限配置要点以及该示例从 MV2 到 MV3 的演进脉络。示例概览一个无需打开历史页面的清理工具浏览器内置的清除浏览数据功能通常藏在设置页深处用户每次清理历史都需要多次点击导航。chrome-extensions-samples 仓库中的 browsingData 示例 展示了另一种路径通过扩展的工具栏图标打开 Popup在下拉框中选择时间范围点击按钮即可调用chrome.browsingData.remove删除指定时间段的用户数据。该示例的核心设计思路非常清晰见 README.mdUI 输入扩展 Popup 中的表单元素select下拉框 按钮负责收集用户的清理时间范围API 执行chrome.browsingData.remove负责实际删除历史数据全程无需跳转到浏览器的历史记录页面。整个示例工程位于 api-samples/browsingData 目录共包含 5 个文件manifest.json扩展清单、popup.html弹出面板结构、popup.js清理逻辑、popup.css样式以及icon.png工具栏图标。运行示例加载与交互步骤按照 README.md 的说明运行该扩展需要以下 4 步克隆仓库将 chrome-extensions-samples 仓库克隆到本地以未打包方式加载打开 Chrome 的chrome://extensions页面开启右上角的开发者模式点击加载已解压的扩展程序选择api-samples/browsingData目录固定扩展在工具栏中固定Pin该扩展以便随时访问其 action 按钮打开 Popup 并交互点击工具栏图标打开扩展弹窗选择时间范围后点击清理按钮。⚠️安全警告README 中特别强调——这个扩展会真正删除你的浏览器历史数据属于高破坏性操作。在实际使用或二次开发时务必确认清理范围与数据类型符合预期建议先在测试环境验证。manifest.json 剖析权限与 Popup 入口示例的 manifest.json 采用 Manifest V3 规范全文如下{ name: BrowsingData API: Basics, version: 1.2, description: Uses the chrome.browsingData API to clear the users history without requiring the user to visit the history page., permissions: [browsingData], action: { default_icon: icon.png, default_popup: popup.html }, manifest_version: 3 }关键配置项解读配置项值作用permissions[browsingData]声明browsingData权限这是调用chrome.browsingData系列 API 的必要前提。缺少该权限时API 调用会直接报错action.default_popuppopup.html指定点击工具栏图标时弹出的页面所有用户交互都在该页面中完成action.default_iconicon.png工具栏中显示的扩展图标manifest_version3声明使用 Manifest V3 规范Service Worker 模型无后台页面从源码结构看该示例没有独立的 Service Worker——所有逻辑都集中在 Popup 页面内因为chrome.browsingDataAPI 可直接在扩展页面含 Popup中调用无需后台脚本中转。这是以 Popup 为核心的极简架构的典型代表。Popup 界面时间范围选择表单popup.html 定义了完整的交互界面核心是一个表单form label fortimeframeRemove all browsing data from:/label select idtimeframe option valuehourthe past hour/option option valuedaythe past day/option option valueweekthe past week/option option value4weeksthe past four weeks/option option valueforeverthe beginning of time/option /select button idbuttonOBLITERATE!/button /form界面设计要点select idtimeframe提供 5 档时间范围选项value值hour/day/week/4weeks/forever是后续 JS 逻辑的输入依据button idbutton触发清理动作的按钮文案 OBLITERATE!抹除直观暗示了其破坏性语义化标签外层div rolemain与按钮相关提示均符合无障碍可访问性ARIA规范页面通过link hrefpopup.css引入样式由 popup.css 控制布局与视觉其中还定义了清理成功后的遮罩层动画.overlay元素样式。核心实现chrome.browsingData.remove 调用解析清理逻辑全部位于 popup.js 中。当用户点击按钮时事件处理器buttonClicked被触发核心调用如下chrome.browsingData.remove( { since: removal_start }, { appcache: true, cache: true, cacheStorage: true, cookies: true, downloads: true, fileSystems: true, formData: true, history: true, indexedDB: true, localStorage: true, serverBoundCertificates: true, serviceWorkers: true, pluginData: true, passwords: true, webSQL: true } );chrome.browsingData.remove接收两个必填参数参数一removalOptions时间范围选项{ since: removal_start }中的since是一个毫秒级时间戳表示只删除该时间点之后产生的数据。它的取值由parseMilliseconds函数计算得出function parseMilliseconds(timeframe) { let now new Date().getTime(); let milliseconds { hour: 60 * 60 * 1000, day: 24 * 60 * 60 * 1000, week: 7 * 24 * 60 * 60 * 1000, 4weeks: 4 * 7 * 24 * 60 * 60 * 1000 }; if (milliseconds[timeframe]) return now - milliseconds[timeframe]; if (timeframe forever) return 0; return null; }时间范围换算逻辑逐行拆解下拉框选项偏移量毫秒since取值hour60 * 60 * 10001 小时now - 3600000day24 * 60 * 60 * 10001 天now - 86400000week7 * 24 * 60 * 60 * 10001 周now - 6048000004weeks4 * 7 * 24 * 60 * 60 * 10004 周now - 2419200000forever不参与偏移计算0即从时间的起点开始删除实现细节值得注意forever的特殊处理映射为0表示删除从 epoch 起点开始的所有数据等价于全部清除防御性校验如果timeframe不在预期枚举内milliseconds[timeframe]为undefined函数返回null外层buttonClicked中通过if (removal_start undefined) return null;提前终止避免传入非法时间戳这种下拉选项 value → 毫秒偏移 → since 时间戳的转换模式是浏览数据清理类扩展的通用做法可直接复用到你自己的项目中。参数二dataToRemove数据类型集合第二个参数是一个对象其键名对应 Chrome 支持清理的每一种浏览数据类型键值为true/false表示是否清除该类型。示例中全部置为true即一次清除所有类别history浏览历史本示例的主题目标cookies与localStorage/sessionStorage相关站点 Cookie 与本地存储cache/appcache/cacheStorage各类缓存HTTP 缓存、AppCache、Cache Storage APIindexedDB/webSQL/fileSystemsIndexedDB、WebSQL 数据库与文件系统数据formData/passwords表单自动填充数据与已保存密码downloads下载记录serviceWorkersService Worker 注册信息pluginData插件数据从 MV3 归档版本沿用至今serverBoundCertificates服务端绑定证书。你可以根据业务需求将不需要的类型改为false。例如只想清历史而不动登录状态可以只保留history: true其余全部false。清理成功后的 UI 反馈清理操作完成后buttonClicked通过动态 DOM 操作向用户呈现结果popup.jsconst success document.createElement(div); success.classList.add(overlay); success.setAttribute(role, alert); success.textContent Data has been cleared.; document.body.appendChild(success); setTimeout(function () { success.classList.add(visible); }, 10); setTimeout(function () { if (close false) success.classList.remove(visible); else window.close(); }, 4000);这段代码的机制动态创建带overlay类的div并声明rolealert无障碍语义屏幕阅读器会播报该提示延迟 10ms 后添加visible类触发 popup.css 中定义的淡入 缩放动画延迟 4000ms 后自动关闭 Popup 窗口若close false则仅移除遮罩保持窗口打开。需要说明的是示例中清理的成功反馈是在调用chrome.browsingData.remove之后立即展示的。而从同一仓库的 MV2 归档版本见下文可以看出该 API 本身还支持传入回调函数——更严谨的做法是在回调中再展示成功提示以便确认浏览器端的数据清除流程确实完成。历史脉络MV2 归档版本的对照仓库的_archive目录中保留了该示例的 Manifest V2 版本_archive/mv2/api/browsingData/basic两者对读可以清晰看出 MV2 → MV3 的演进差异UI 完全一致MV2 版本的 popup.html 与 MV3 版本的下拉选项、按钮文案逐字相同逻辑等价但写法不同MV2 的 popup.js 采用基于PopupController构造函数的原型式写法将parseMilliseconds_、handleCallback_、handleClick_封装为对象方法MV3 版本则改为更简洁的模块化函数式写法回调参数MV2 版本在调用chrome.browsingData.remove时显式传入第三个参数this.handleCallback_.bind(this)作为完成回调并在清理过程中禁用按钮、将按钮文案改为 Clearing...——这些细节可作为 MV3 版本增强反馈机制的参考权限声明MV2 使用permissions: [browsingData]声明MV3 的 manifest 同样通过顶层permissions字段声明语法上保持一致。从这一对照可以推断chrome.browsingData的核心 API 语义since时间戳 数据类型集合在 MV2 与 MV3 之间保持稳定迁移成本主要集中在代码组织方式与页面结构上。适用场景与安全实践综合示例的定位chrome.browsingDataAPI 适合以下场景隐私一键清理为普通用户提供比设置页更快捷的历史、缓存清理入口企业/教育环境在受管设备上定时或按需清除浏览痕迹开发调试快速清空某站的 Cookie、缓存、IndexedDB 以复现首次访问行为。同时务必注意安全边界权限最小化仅在确实需要时申请browsingData权限并在dataToRemove中只开启业务必需的数据类型避免顺手清除用户密码、下载记录等敏感数据破坏性确认清理是不可逆操作生产级扩展应在执行前二次确认或在 UI 上明确警示如本示例按钮文案 OBLITERATE! 的暗示时间范围谨慎since: 0意味着删除全部数据误触风险极高建议对forever选项单独强化确认逻辑。总结本文以 chrome-extensions-samples 仓库的 browsingData 示例 为主线完整梳理了从 manifest 权限声明、Popup 表单设计、parseMilliseconds时间换算到chrome.browsingData.remove双参数调用与 UI 反馈的整条链路。该示例虽然代码量极小却精准演示了chrome.browsingDataAPI 最核心的用法用removalOptions.since界定时间边界用dataToRemove枚举数据类型。对照_archive中的 MV2 版本你还能直观看到同一功能在不同 Manifest 规范下的实现风格差异为迁移或二次开发提供现成范本。如果你想深入了解该 API 的其他能力如面向单一类型的便捷清理方法、更多数据类型开关可以继续在仓库中搜索browsingData相关代码与文档并结合 Chrome 官方 API 参考进行实践验证。赞分享示例工程【免费下载链接】chrome-extensions-samplesChrome Extensions Samples项目地址https://gitcode.com/gh_mirrors/ch/chrome-extensions-samples点击查看免费下载相关推荐JavaScript变量提升和作用域通过JavaScript Challenges Book掌握闭包和条件语句JavaScript变量提升和作用域通过JavaScript Challenges Book掌握闭包和条件语句 JavaScript Challenges B示例工程DeerFlow 如何为 Docker AIO 沙箱配置 isolated 或 allowlist 出站网络策略DeerFlow 如何为 Docker AIO 沙箱配置 isolated 或 allowlist 出站网络策略 DeerFlow 的 AIO 沙箱默认保持正常示例工程如何使用co与TypeScript打造强类型异步编程完整实践指南如何使用co与TypeScript打造强类型异步编程完整实践指南 GitHub 加速计划 / co / co 是一个基于生成器的 Node.js 流程控制工具示例工程上一篇10个终极技巧使用Tutorial-Codebase-Knowledge自定义爬虫精准提取代码库内容下一篇William Fiset算法宝库全面解析Algorithms项目架构与核心特性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考