如何在Chrome中便捷提取并显示HTTPS请求URL中的sessionId

一、准备3个文件 #

新建一个空文件夹（比如命名为GetSessionId），在里面创建以下3个文件：

1. manifest.json（扩展配置文件） #

{
  "manifest_version": 3,
  "name": "SessionId提取工具",
  "version": "1.0",
  "permissions": ["webRequest", "storage", "activeTab"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

备注：如果懒得做图标，不用额外添加，不影响核心功能

2. background.js（后台监听网络请求） #

// 监听所有GET请求，筛选带sessionId参数的请求
chrome.webRequest.onCompleted.addListener(
  (details) => {
    if (details.method === "GET") {
      const url = new URL(details.url);
      const sessionId = url.searchParams.get("sessionId");
      if (sessionId) {
        // 保存最新的sessionId和对应完整URL
        chrome.storage.local.set({
          latestSessionId: sessionId,
          latestUrl: details.url
        });
      }
    }
  },
  {urls: ["<all_urls>"]}
);

3. popup.html（扩展弹窗界面） #

<!DOCTYPE html>
<html>
<head>
  <style>
    body {width: 300px; padding: 15px; font-size: 14px;}
    button {width: 100%; padding: 8px; cursor: pointer; margin-bottom: 10px;}
    #result {padding: 10px; background: #f5f5f5; border-radius: 4px;}
  </style>
</head>
<body>
  <button id="getBtn">获取最新SessionId</button>
  <div id="result"></div>
  <script src="popup.js"></script>
</body>
</html>

4. popup.js（弹窗交互逻辑） #

document.getElementById("getBtn").addEventListener("click", () => {
  chrome.storage.local.get(["latestSessionId", "latestUrl"], (data) => {
    const resultDiv = document.getElementById("result");
    if (data.latestSessionId) {
      resultDiv.innerHTML = `
        <p>SessionId：<strong>${data.latestSessionId}</strong></p>
        <p>完整请求URL：<br><small>${data.latestUrl}</small></p>
        <button onclick="copyId('${data.latestSessionId}')">复制SessionId</button>
      `;
    } else {
      resultDiv.innerHTML = "<p>未找到带SessionId的请求，请先登录网站并操作页面</p>";
    }
  });
});

function copyId(id) {
  navigator.clipboard.writeText(id).then(() => {
    alert("SessionId已复制到剪贴板");
  });
}

二、安装扩展到Chrome #

1. 打开Chrome，地址栏输入chrome://extensions/回车
2. 开启页面右上角的「开发者模式」
3. 点击左上角「加载已解压的扩展程序」，选择你创建的GetSessionId文件夹

三、使用方法 #

1. 正常登录目标网站，随便操作几下页面（确保后台有带sessionId的GET请求发出）
2. 点击Chrome工具栏上的「SessionId提取工具」图标
3. 弹窗内点击「获取最新SessionId」，就能看到提取出的内容，还能一键复制

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