1. 项目概述一个浏览器标签页的“守护者”如果你和我一样是个重度浏览器用户每天要开几十个标签页查资料、写代码、看文档那你一定经历过那种“心头一紧”的时刻手一抖不小心点到了浏览器窗口右上角的那个“X”或者按下了CtrlW然后眼睁睁看着一个承载了重要工作进度的标签页瞬间消失。更糟的是浏览器崩溃重启后那些没来得及保存的临时工作页面也一并烟消云散。这种体验足以让任何专注工作的人瞬间破防。tomlin7/DONT-CLOSE-MY-TAB这个项目就是为了解决这个“痛点”而生的。从名字就能直白地感受到它的使命“别关我的标签页”。它本质上是一个浏览器扩展其核心功能是拦截并管理浏览器标签页的关闭行为防止因误操作或浏览器意外崩溃导致重要页面丢失。这听起来像是一个简单的需求但背后涉及对浏览器扩展API的深度理解、对用户交互行为的细致揣摩以及对数据持久化方案的巧妙设计。这个项目特别适合那些依赖浏览器进行长时间、多任务处理的从业者比如开发者、研究员、内容创作者、数据分析师或者任何需要在多个网页间频繁切换、且页面状态如表单数据、临时编辑内容极其宝贵的人。它不是一个功能庞杂的“瑞士军刀”而是一个精准解决单一高频痛点的“手术刀”这种聚焦让它在众多浏览器扩展中显得尤为实用和可靠。2. 核心功能与设计思路拆解2.1 核心需求从“防误关”到“智能恢复”一个合格的“标签页守护者”其需求远不止弹个确认框那么简单。经过对日常使用场景的梳理我们可以将其核心需求分解为几个层次主动防护层防止用户因鼠标误点击关闭按钮、误触快捷键CtrlW/CmdW而关闭标签页。这是最基础、最直接的需求。被动防护层应对浏览器进程崩溃、系统意外重启等不可抗力。需要有能力在浏览器恢复后重建或恢复崩溃前的重要标签页及其状态尽可能接近。智能管理层用户可能确实想关闭某些标签页。因此防护机制需要是“智能”且可配置的例如允许用户设置“保护名单”白名单或“忽略名单”黑名单对特定网站或特定条件下的关闭行为放行。状态感知层能感知标签页的状态。例如一个包含未提交表单输入的页面其关闭风险远高于一个纯阅读的新闻页面。理想的守护者应能识别这种状态差异并采取不同级别的防护措施。用户体验层防护行为不能过于粗暴和干扰。频繁弹出确认对话框会打断工作流引起反感。需要在“安全”和“流畅”之间找到平衡。DONT-CLOSE-MY-TAB项目的设计思路正是围绕这些层次展开的。它没有试图做一个大而全的标签页管理工具而是聚焦于“防护”和“恢复”这两个核心通过精巧地利用浏览器扩展的能力实现了一套轻量但有效的解决方案。2.2 技术方案选型为什么是浏览器扩展实现标签页防护大体有几种思路修改浏览器源码不现实、使用独立桌面应用监控浏览器进程太重、或者开发浏览器扩展。浏览器扩展方案几乎是唯一兼具可行性、通用性和用户体验的选择。可行性现代浏览器Chrome、Firefox、Edge等都提供了强大的扩展API特别是tabs和webNavigation等API允许开发者监听和干预标签页的生命周期事件如创建、更新、关闭、移除。通用性基于WebExtensions标准开发的扩展可以相对容易地适配多个浏览器平台最大化覆盖用户群体。用户体验扩展以“插件”形式存在与浏览器深度集成可以做到无感防护或最小化干扰同时又能利用浏览器自身的存储机制如chrome.storage来保存状态。因此项目选择基于WebExtensions API进行开发是一个顺理成章且最优的技术决策。它直接站在了浏览器的“肩膀”上无需重复造轮子。2.3 架构概览事件驱动与状态管理项目的核心架构是典型的事件驱动模型。扩展作为后台服务Service Worker 或 Background Page持续监听来自浏览器和用户的各种事件并做出响应。用户操作/浏览器事件 - 扩展后台监听 - 逻辑判断与规则匹配 - 执行动作阻止/放行/记录关键的技术组件包括事件监听器这是扩展的“耳朵”。主要监听tabs.onRemoved: 标签页被移除关闭时触发。这是实现“防误关”的核心钩子。tabs.onUpdated: 标签页状态更新如URL变化、标题变化时触发。用于更新内部维护的标签页信息。tabs.onCreated: 新标签页创建时触发。用于初始化跟踪。windows.onRemoved: 浏览器窗口关闭时触发。需要特殊处理因为关闭窗口会连带关闭所有标签页。runtime.onStartup和runtime.onInstalled: 扩展启动或安装时触发。用于初始化数据和恢复上一次会话。规则引擎这是扩展的“大脑”。它根据预定义的规则用户配置来判断是否应该阻止某个关闭操作。规则可能基于URL模式匹配使用通配符或正则表达式匹配特定域名或路径的页面如*://*.notion.so/*保护所有Notion页面。标签页状态页面是否包含表单输入可通过注入内容脚本检测beforeunload事件或监听输入变化。用户自定义列表手动添加的“始终保护”或“始终允许关闭”的网站列表。时间或行为模式例如保护打开时间超过一定阈值如5分钟的标签页认为用户已投入时间成本。状态存储这是扩展的“记忆”。需要持久化存储的数据包括受保护的标签页列表每个标签页的ID、URL、标题、最后活动时间等元数据。用户配置的规则。上一次会话的快照用于浏览器崩溃后恢复。这里通常只存储URL等关键信息因为完整恢复页面DOM状态几乎不可能涉及安全限制但恢复URL并重新加载已是极大帮助。用户界面这是扩展的“脸”。通常包括弹出页面用于快速查看受保护的标签页、一键恢复、调整基础设置。选项页面用于进行更详细的规则配置。内容脚本可选。注入到网页中用于检测页面是否有未保存的更改并通过消息传递与后台通信。这个架构清晰地将监听、判断、存储和交互分离使得扩展逻辑清晰易于维护和扩展新功能。3. 关键实现细节与核心技术点3.1 拦截标签页关闭tabs.onRemoved与chrome.tabs.remove的博弈拦截关闭是核心中的核心。这里有一个关键的技术细节浏览器扩展不能直接“取消”一个标签页关闭事件。tabs.onRemoved事件是通知性的当它触发时标签页已经进入关闭流程。那么如何实现“阻止”呢常见的策略是“先阻止后恢复”。监听与阻止在tabs.onRemoved事件触发时扩展后台脚本立即检查该标签页是否符合保护条件。条件判断如果符合例如URL在白名单内或者页面有未保存状态则扩展不执行任何放行操作而是立即采取恢复行动。恢复行动扩展使用chrome.tabs.createAPI重新创建一个新的标签页并指定其URL为刚刚被关闭的标签页的URL。同时可以将原标签页的一些重要状态如滚动位置需通过其他API提前获取尝试应用到新标签页上。用户体验对于用户来说视觉上会看到标签页“闪”了一下然后重新打开仿佛关闭被撤销了。为了减少干扰高级的实现会尝试复用原来的标签页ID但这很困难或者通过动画让过渡更平滑。另一种更优雅但实现更复杂的方式是尝试在关闭发生前进行拦截。这可以通过在网页中注入内容脚本监听页面的beforeunload事件来实现。当用户尝试关闭或刷新页面时beforeunload事件会触发内容脚本可以提示用户确认。然后内容脚本通过消息传递通知扩展后台后台再决定是否要采取进一步行动。这种方式能更早地介入关闭流程但需要处理扩展与网页之间的通信并且beforeunload事件在现代浏览器中受到较多限制例如不能自定义提示框文本且用户很容易忽略。DONT-CLOSE-MY-TAB项目很可能采用了第一种为主、第二种为辅的混合策略在可靠性和用户体验之间取得平衡。3.2 会话恢复chrome.sessionsAPI 的妙用应对浏览器崩溃是另一个硬核需求。幸运的是现代浏览器提供了chrome.sessionsAPI或等价的browser.sessions它专门用于访问和操作浏览器会话。获取最近关闭的标签页chrome.sessions.getRecentlyClosed()可以获取一个列表包含最近关闭的标签页和窗口信息。这对于恢复手动关闭但可能误关的标签页非常有用。恢复特定项目chrome.sessions.restore(sessionId)可以恢复一个特定的已关闭会话项标签页或窗口。监听崩溃事件虽然浏览器不会直接发送“我要崩溃了”的信号但扩展可以通过监听runtime.onStartup事件并结合检查上次正常关闭时保存的会话快照来推断是否发生了异常退出。在每次正常关闭前通过windows.onRemoved或tabs.onRemoved进行一定逻辑判断扩展可以将当前所有受保护标签页的URL列表保存到chrome.storage.local一种扩展的持久化存储中。当扩展再次启动时如果发现存储中存在未处理的会话快照且当前窗口是全新的就可以认为浏览器是崩溃后重启的进而自动恢复那些受保护的标签页。这里的一个实践要点是存储的会话数据需要定期清理和更新。不能无限制地存储所有历史标签页否则存储会膨胀恢复列表也会变得冗长。通常的策略是只保留最后一次“有效会话”的快照或者为存储的数据设置一个过期时间。3.3 规则匹配引擎从简单到复杂规则引擎的设计决定了扩展的智能程度。一个简单的实现可能只支持静态URL白名单。// 简化的规则示例 const protectedPatterns [ *://docs.google.com/document/*, *://*.figma.com/file/*, *://github.com/*/pull/*, file:///*.md // 甚至保护本地Markdown文件 ]; function shouldProtectTab(tabUrl) { return protectedPatterns.some(pattern { // 简单的通配符匹配或使用更强大的 micromatch/minimatch 库 return matchPattern(tabUrl, pattern); }); }更复杂的引擎会引入多种规则类型和优先级规则类型匹配条件动作优先级全局开关扩展总开关启用/禁用所有保护最高域名白名单完整域名或通配符始终保护高域名黑名单完整域名或通配符始终不保护高URL关键词URL包含特定关键词保护中页面状态规则通过内容脚本检测到表单有输入保护中时间规则页面打开时间 N 分钟保护低默认规则以上都不匹配不保护最低实现时需要按照优先级顺序遍历规则一旦匹配则立即返回对应的动作。这要求规则引擎的设计具有良好的可扩展性方便未来添加新的规则类型如基于页面标题关键词、基于浏览器活动状态等。3.4 存储策略chrome.storagevsIndexedDB扩展需要持久化存储数据。浏览器提供了几种选择chrome.storage.local这是最常用的选择。它提供异步API存储空间较大通常5MB或10MB数据在扩展卸载前一直存在并且在不同浏览器实例间共享。非常适合存储用户配置、受保护标签页列表、会话快照等结构化数据JSON格式。它的API简单易用是大多数扩展的首选。chrome.storage.sync如果数据需要在用户登录同一账户的不同设备间同步则使用此API。存储空间较小且依赖于用户登录状态。IndexedDB当需要存储大量、复杂、需要索引查询的结构化数据时使用。对于DONT-CLOSE-MY-TAB这类项目如果未来要加入强大的历史记录查询、统计分析功能可能会用到。但对于核心功能而言chrome.storage.local完全足够且更轻量。localStorage不推荐在扩展后台脚本中使用因为它是同步API可能阻塞且存储空间小数据不与其他扩展脚本共享。实操心得使用chrome.storage.local时一定要注意它的异步特性。所有get和set操作都返回 Promise或使用回调。在事件监听器里操作存储时要确保逻辑放在正确的回调或async/await函数中否则很容易出现读取到旧数据或写入失败的问题。一个常见的模式是在扩展启动时 (runtime.onStartup) 将存储中的数据加载到内存中的一个变量里后续操作先读写这个内存变量然后再定期或适时地同步回存储。这样可以提高响应速度但要处理好内存数据与存储数据的一致性。4. 从零到一的实现步骤拆解假设我们现在要动手实现一个简化版的“DONT-CLOSE-MY-TAB”以下是核心步骤和代码要点。4.1 项目初始化与清单配置首先创建一个新的目录并创建核心的manifest.json文件。这是扩展的“身份证”和“说明书”。{ manifest_version: 3, name: Tab Guardian (简易版), version: 1.0, description: 防止误关闭重要标签页并在崩溃后尝试恢复。, permissions: [ tabs, // 操作和查询标签页 storage, // 使用chrome.storage保存数据 sessions // 访问最近关闭的会话恢复用 ], background: { service_worker: background.js }, action: { default_popup: popup.html, default_icon: icon.png }, options_page: options.html, icons: { 128: icon.png } }关键点manifest_version: 必须为3MV3。MV2已逐步被淘汰。permissions: 申请最小必要的权限。tabs,storage,sessions是实现核心功能所必需的。background.service_worker: 指定后台脚本。Service Worker 是MV3的标准它替代了MV2中的后台页面更省资源。4.2 后台服务核心逻辑实现创建background.js这是扩展的大脑。// background.js // 内存中维护的受保护标签页Map key: tabId, value: tabInfo let protectedTabs new Map(); // 用户配置的规则 let userRules { whitelist: [*://docs.google.com/*, *://*.notion.so/*], protectUnsavedForms: true, minProtectionTime: 300000 // 5分钟单位毫秒 }; // 1. 启动时加载保存的数据 chrome.runtime.onStartup.addListener(async () { const data await chrome.storage.local.get([protectedTabs, userRules]); if (data.protectedTabs) { protectedTabs new Map(data.protectedTabs); } if (data.userRules) { userRules data.userRules; } console.log(Tab Guardian 已启动加载了, protectedTabs.size, 个受保护标签页。); }); // 2. 监听标签页关闭 chrome.tabs.onRemoved.addListener(async (tabId, removeInfo) { // 检查这个标签页是否在受保护列表中 const tabInfo protectedTabs.get(tabId); if (!tabInfo) { return; // 不受保护直接放行 } // 检查是否符合保护条件例如打开时间足够长 const now Date.now(); if (now - tabInfo.createdAt userRules.minProtectionTime) { // 打开时间太短可能用户就是不想留移出保护列表并放行 protectedTabs.delete(tabId); await saveProtectedTabsToStorage(); return; } // 符合保护条件阻止关闭并尝试恢复 console.log(尝试阻止关闭标签页: ${tabInfo.url}); // 立即重新打开该标签页 const newTab await chrome.tabs.create({ url: tabInfo.url, active: false // 不立即激活减少干扰 }); // 将保护关系转移到新标签页 protectedTabs.delete(tabId); tabInfo.tabId newTab.id; tabInfo.createdAt now; // 更新时间戳 protectedTabs.set(newTab.id, tabInfo); await saveProtectedTabsToStorage(); // 可选发送通知给用户 chrome.notifications.create({ type: basic, iconUrl: icon.png, title: 标签页已恢复, message: 已为您重新打开: ${new URL(tabInfo.url).hostname} }); }); // 3. 监听新标签页创建和更新将其加入监控如果符合规则 chrome.tabs.onCreated.addListener((tab) { evaluateAndProtectTab(tab); }); chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) { if (changeInfo.status complete tab.url) { // 页面加载完成时评估 evaluateAndProtectTab(tab); } }); // 评估标签页是否需要保护 async function evaluateAndProtectTab(tab) { // 规则匹配逻辑 const shouldProtect shouldProtectByURL(tab.url) || await shouldProtectByFormState(tab.id); if (shouldProtect !protectedTabs.has(tab.id)) { protectedTabs.set(tab.id, { tabId: tab.id, url: tab.url, title: tab.title, createdAt: Date.now() }); await saveProtectedTabsToStorage(); console.log(已保护标签页: ${tab.url}); } else if (!shouldProtect protectedTabs.has(tab.id)) { // 如果不再符合条件则移除保护 protectedTabs.delete(tab.id); await saveProtectedTabsToStorage(); } } // URL规则匹配函数 function shouldProtectByURL(url) { return userRules.whitelist.some(pattern { // 这里需要实现一个通配符匹配函数简化起见可以使用 chrome.matchPattern // 注意chrome.matchPattern 是匹配权限模式不是通用URL匹配此处仅为示意 // 实际项目应使用更完善的匹配库如 minimatch try { return new RegExp(^ pattern.replace(/\*/g, .*) $).test(url); } catch(e) { return false; } }); } // 检测表单状态需要内容脚本配合此处为示意 async function shouldProtectByFormState(tabId) { if (!userRules.protectUnsavedForms) return false; // 通过消息传递询问内容脚本 try { const response await chrome.tabs.sendMessage(tabId, {action: checkFormState}); return response response.hasUnsavedChanges; } catch (error) { // 可能内容脚本未注入或页面不允许注入如chrome://页面 return false; } } // 保存数据到存储 async function saveProtectedTabsToStorage() { // 将Map转换为数组存储 const tabsArray Array.from(protectedTabs.entries()); await chrome.storage.local.set({ protectedTabs: tabsArray }); }这个后台脚本实现了核心的监听、评估、保护和恢复逻辑。它使用内存Map (protectedTabs) 来快速查询并定期同步到chrome.storage.local中。4.3 内容脚本注入与页面状态检测为了检测页面是否有未保存的表单我们需要向受监控的页面注入内容脚本。首先在manifest.json中声明内容脚本和所需权限。// 在 manifest.json 的 permissions 中添加 scripting permissions: [ tabs, storage, sessions, scripting ], host_permissions: [ all_urls // 为了能向所有页面注入脚本实际发布时应尽量收窄范围 ]然后创建内容脚本content-script.js// content-script.js let hasUnsavedChanges false; // 监听页面输入事件 document.addEventListener(input, (event) { // 简单判断如果输入发生在表单元素内则认为有未保存更改 if (event.target.matches(input, textarea, select, [contenteditabletrue])) { hasUnsavedChanges true; // 可以在这里添加更精细的判断比如对比初始值 } }); // 监听表单提交事件提交后重置状态 document.addEventListener(submit, () { hasUnsavedChanges false; }); // 监听来自后台脚本的消息 chrome.runtime.onMessage.addListener((request, sender, sendResponse) { if (request.action checkFormState) { sendResponse({ hasUnsavedChanges: hasUnsavedChanges }); } // 保持消息通道开放用于异步响应 return true; });最后在后台脚本中需要在合适的时机如标签页URL匹配规则时动态注入这个内容脚本。MV3中推荐使用chrome.scripting.executeScript。// 在 background.js 的 evaluateAndProtectTab 函数中决定注入内容脚本 async function injectContentScriptIfNeeded(tabId, url) { if (shouldProtectByURL(url) userRules.protectUnsavedForms) { try { await chrome.scripting.executeScript({ target: { tabId: tabId }, files: [content-script.js] }); } catch (err) { console.warn(无法向标签页 ${tabId} 注入脚本:, err.message); } } } // 然后在 tabs.onCreated 和 tabs.onUpdated 中调用这个函数4.4 用户界面弹出页与选项页一个基本的弹出页popup.html和对应的popup.js可以让用户快速查看和管理受保护的标签页。!-- popup.html -- !DOCTYPE html html head style body { width: 300px; padding: 10px; font-family: sans-serif; } .tab-item { padding: 8px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;} .tab-title { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .remove-btn { background: #ff6b6b; color: white; border: none; padding: 2px 8px; border-radius: 3px; cursor: pointer; } /style /head body h3受保护的标签页/h3 div idprotectedList加载中.../div script srcpopup.js/script /body /html// popup.js document.addEventListener(DOMContentLoaded, async () { const listEl document.getElementById(protectedList); const data await chrome.storage.local.get([protectedTabs]); const tabsMap new Map(data.protectedTabs || []); if (tabsMap.size 0) { listEl.innerHTML p暂无受保护的标签页。/p; return; } listEl.innerHTML ; for (const [tabId, tabInfo] of tabsMap) { const div document.createElement(div); div.className tab-item; div.innerHTML span classtab-title title${tabInfo.title}${tabInfo.title}/span button classremove-btn>