如何实现点击链接时召回同一页面已打开的对应浏览器标签页？

针对你频繁处理BitBucket Issues的场景，我们可以通过同源存储（localStorage + sessionStorage）配合storage事件监听来实现：既避免重复打开同一Issue，又能在点击时直接唤起已打开的标签页。下面是具体的实现思路和完整脚本：

核心原理 #

1. URI归一化：把Issue的「查看页」和「编辑页」URL映射到同一个唯一标识（比如Issue ID），这样不管是点击查看还是编辑链接，都能识别为同一个Issue。
2. 标签页标识存储：每个打开的Issue标签页会生成一个唯一ID存在sessionStorage（每个标签页独立），同时把「Issue ID → 标签页ID」的映射存在localStorage（同源共享）。
3. 跨标签页通信：当你在列表页点击链接时，先检查localStorage里是否有该Issue的标签页映射：
   • 有则发送激活信号，对应标签页收到信号后调用window.focus()前置自己；
   • 没有则正常打开新标签页，同时在新标签页完成映射存储。
4. 清理机制：标签页关闭时，从localStorage移除对应映射，避免残留无效数据。

完整Tampermonkey脚本 #

// ==UserScript==
// @name         BitBucket Issue Tab Reclaimer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  避免重复打开BitBucket Issue，点击链接直接唤起已打开的标签页
// @author       Your Name
// @match        https://your-bitbucket-domain.com/*/issues/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 1. 工具函数：提取Issue的唯一ID（适配BitBucket的URL结构）
    function getIssueIdFromUrl(url) {
        // 匹配类似 /issues/123 或 /issues/123/edit 的URL，提取123
        const match = url.match(/\/issues\/(\d+)(?:\/edit)?$/);
        return match ? match[1] : null;
    }

    // 2. 处理Issue详情页（查看/编辑页）
    const currentIssueId = getIssueIdFromUrl(window.location.href);
    if (currentIssueId) {
        // 生成当前标签页的唯一标识
        const tabId = `tab_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        sessionStorage.setItem('bitbucket_tab_id', tabId);

        // 把Issue ID和当前标签页ID的映射存入localStorage
        const issueTabMap = JSON.parse(localStorage.getItem('bitbucket_issue_tab_map')) || {};
        issueTabMap[currentIssueId] = tabId;
        localStorage.setItem('bitbucket_issue_tab_map', JSON.stringify(issueTabMap));

        // 监听storage事件，收到激活信号时前置当前标签页
        window.addEventListener('storage', (e) => {
            if (e.key === 'bitbucket_activate_tab' && e.newValue === tabId) {
                window.focus();
                // 清除激活信号，避免重复触发
                localStorage.removeItem('bitbucket_activate_tab');
            }
        });

        // 页面关闭时，移除localStorage中的映射
        window.addEventListener('beforeunload', () => {
            const issueTabMap = JSON.parse(localStorage.getItem('bitbucket_issue_tab_map')) || {};
            delete issueTabMap[currentIssueId];
            localStorage.setItem('bitbucket_issue_tab_map', JSON.stringify(issueTabMap));
        });
    }

    // 3. 处理Issue列表页的链接点击
    else {
        // 给所有Issue链接绑定点击事件
        document.addEventListener('click', (e) => {
            const link = e.target.closest('a');
            if (!link || !link.href) return;

            const issueId = getIssueIdFromUrl(link.href);
            if (!issueId) return;

            // 检查localStorage中是否已有该Issue的标签页映射
            const issueTabMap = JSON.parse(localStorage.getItem('bitbucket_issue_tab_map')) || {};
            const targetTabId = issueTabMap[issueId];

            if (targetTabId) {
                // 阻止默认打开新标签页的行为
                e.preventDefault();
                e.stopPropagation();
                // 发送激活信号，通知对应标签页前置
                localStorage.setItem('bitbucket_activate_tab', targetTabId);
            }
            // 如果没有映射，就让浏览器正常打开新标签页（后续详情页会自动存入映射）
        }, true);
    }
})();

使用说明 #

1. 把脚本中的https://your-bitbucket-domain.com替换成你实际使用的BitBucket域名；
2. 安装脚本后，当你在Issue列表页点击某个Issue链接：
   • 如果该Issue已经在其他标签页打开，会直接唤起那个标签页；
   • 如果没打开过，会正常打开新标签页，之后再点击就会唤起它；
3. 不管是查看页还是编辑页，都会被识别为同一个Issue，避免重复打开。

注意事项 #

• 该方案仅适用于同源域名（你的场景完全符合）；
• 标签页关闭时会自动清理映射，不会留下无效数据；
• 如果手动刷新Issue详情页，映射会自动更新，不影响功能。

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