如何用JavaScript统计右键菜单的‘新标签页打开’与‘另存为’操作

由于浏览器未提供直接监听右键菜单项选择的API，无法100%精准区分所有右键操作，但通过组合事件监听+Service Worker拦截的方式，可以实现接近精准的统计，同时避开后端依赖。

核心思路 #

利用Service Worker拦截所有资源请求（包括右键“在新标签页打开”“另存为”触发的请求），结合页面内的事件监听补充判断，最终统计有效操作次数。统计数据可存储在localStorage或IndexedDB中（无后端情况下），用于前端展示。

具体实现步骤 #

1. 注册Service Worker #

在页面主JS中注册Service Worker，用于拦截资源请求：

// 主页面JS
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注册成功');
    } catch (err) {
      console.error('Service Worker 注册失败:', err);
    }
  });
}

2. 编写Service Worker拦截逻辑（sw.js） #

在Service Worker中监听fetch事件，判断请求是否为需要统计的文件/图片，然后记录统计数据：

// sw.js
const TARGET_DOMAINS = ['你的资源域名']; // 替换为实际资源域名
const STORAGE_KEY = 'download_stats';

self.addEventListener('fetch', async (event) => {
  const requestUrl = new URL(event.request.url);
  
  // 判断是否为目标资源（可根据后缀、域名等规则调整）
  const isTargetResource = TARGET_DOMAINS.includes(requestUrl.hostname) && 
    (requestUrl.pathname.match(/\.(pdf|docx|jpg|png|gif)$/i) !== null);
  
  if (isTargetResource) {
    // 读取现有统计数据
    let stats = await caches.match(STORAGE_KEY) || { counts: {} };
    if (typeof stats === 'Response') {
      stats = await stats.json();
    }
    
    // 更新统计计数
    const resourcePath = requestUrl.pathname;
    stats.counts[resourcePath] = (stats.counts[resourcePath] || 0) + 1;
    
    // 存储更新后的统计数据（用caches或IndexedDB，这里用caches示例）
    await caches.open('stats-cache').then(cache => {
      cache.put(STORAGE_KEY, new Response(JSON.stringify(stats)));
    });
  }
  
  // 继续请求原资源，不影响用户操作
  event.respondWith(fetch(event.request));
});

3. 页面内事件监听补充（减少误判） #

在页面中监听contextmenu事件，记录用户右键点击的目标元素，结合Service Worker的统计数据进行校验：

// 主页面JS
let lastRightClickTarget = null;

document.addEventListener('contextmenu', (e) => {
  // 记录右键点击的文件链接或图片
  const target = e.target;
  if (target.tagName === 'A' && target.href.match(/\.(pdf|docx)$/i)) {
    lastRightClickTarget = target.href;
  } else if (target.tagName === 'IMG') {
    lastRightClickTarget = target.src;
  } else {
    lastRightClickTarget = null;
  }
});

// 定期读取统计数据并展示（示例）
setInterval(async () => {
  const cache = await caches.open('stats-cache');
  const statsResp = await cache.match('download_stats');
  if (statsResp) {
    const stats = await statsResp.json();
    console.log('当前统计数据:', stats.counts);
    // 这里可以将统计数据渲染到页面上
  }
}, 5000);

注意事项 #

• 缓存问题：如果资源已被浏览器缓存，右键“在新标签页打开”可能不会发起新请求，导致Service Worker无法拦截。可以通过在资源URL后添加随机参数（如?v=1.0），或设置缓存策略为no-cache来避免，但会增加服务器负载（如果无法控制服务器，此方法可能受限）。
• 跨域资源：如果资源来自其他域名，需要确保Service Worker的作用域覆盖该域名，或配置CORS允许跨域请求拦截。
• 统计数据存储：无后端情况下，统计数据仅保存在用户本地，无法汇总所有用户数据。如果需要汇总，仍需后端支持，但用户当前场景可忽略。

内容的提问来源于stack exchange，提问作者kamilfromxyz