网页掉线终结者：Token 永续只需一个插件！

最新推荐文章于 2025-04-12 23:55:45 发布

置顶一只牛博

最新推荐文章于 2025-04-12 23:55:45 发布

阅读量1.4k

点赞数 26

分类专栏：插件文章标签：前端 javascript 开发语言 google插件

本文链接：https://blog.csdn.net/Mrxiao_bo/article/details/144764851

版权

插件专栏收录该内容

14 篇文章

订阅专栏

欢迎来到我的博客，代码的世界里，每一行都是一个故事

🎏：你只管努力，剩下的交给时间

🏠 ：小破站

网页掉线终结者：Token 永续只需一个插件！

还是先说实现

当你想为一个页面创建定时刷新的时候，可以在当前页面直接右键

想要关闭定时刷新，可以右键，或者直接关闭页面即可

前言：

想象一下，你正在浏览一个页面，突然来了点急事，离开了一会儿，回来后发现登录状态失效了！页面提示你 “Session 已过期，请重新登录。” 这是不是非常恼人？尤其是那些 Token、Cookie 或 Session 过期时间极短的网站，你甚至需要频繁刷新来保持活跃。

今天，我为你带来了终极解决方案——自动刷新插件 Auto Refresh Tabs，一款让你避免掉线尴尬的神器！

痛点描述：

为什么需要自动刷新？

Token 过期烦人：很多网站的 Token 过期时间很短，稍不注意就需要重新登录。
Session 状态丢失：长时间不操作页面，Session 就会掉线，导致重要的数据可能丢失。
突发事件中断操作：正在工作或者查看页面内容，突然被其他事情打断，回来却发现必须重新验证或刷新页面。

这些问题不仅影响效率，还可能导致无谓的重复劳动！

插件的解决方案：

定时刷新页面
通过插件，你可以为任意页面设置定时刷新间隔，避免因长时间不操作导致的掉线问题。设置非常简单，只需要右键点击并选择“定时刷新”，就能高枕无忧！
灵活配置刷新间隔
插件支持 1 分钟、3 分钟、5 分钟等多种时间间隔，甚至可以根据需求自定义时间！你再也不用担心 Token 过期而措手不及。
自动恢复失效的 Tab
如果某个页面意外关闭，插件还能帮你清理无效的刷新任务，保持资源整洁高效。

当你想为一个页面创建定时刷新的时候，可以在当前页面直接右键

想要关闭定时刷新，可以右键，或者直接关闭页面即可

插件背后的原理

这款插件基于 Chrome 扩展的功能实现，使用了以下技术：

ContextMenus：右键菜单的创建和动态更新。
Alarms API：定时触发刷新任务，精准到毫秒。
Tabs API：获取和操作浏览器的 Tab，支持自动清理无效页面。
Storage API：存储用户选择的刷新间隔，确保个性化体验。

核心逻辑代码如下：

// 设置刷新任务
function setRefresh(tabId, interval) {
  refreshTabs[tabId] = interval;
  chrome.alarms.create(`refresh-${tabId}`, { periodInMinutes: interval / 60000 });
  console.log(`设置刷新：Tab ${tabId}, 每 ${interval / 1000} 秒刷新一次`);
}

// 清除刷新任务
function clearRefresh(tabId) {
  if (refreshTabs[tabId]) {
    delete refreshTabs[tabId];
    chrome.alarms.clear(`refresh-${tabId}`);
    console.log(`清除刷新：Tab ${tabId}`);
  }
}

// 定时触发刷新
chrome.alarms.onAlarm.addListener((alarm) => {
  const tabId = parseInt(alarm.name.replace("refresh-", ""), 10);
  chrome.tabs.reload(tabId, { bypassCache: true }, () => {
    console.log(`Tab ${tabId} 刷新成功`);
  });
});