如何从网页获取全局变量t并传递至Chrome扩展后台/弹窗？

1. 核心问题：跨上下文访问全局变量 #

浏览器扩展的内容脚本（content.js）运行在隔离上下文中，无法直接访问页面的全局变量（如window.t）。解决方法是向页面注入一段脚本，在页面自身的上下文里捕获window.t，再通过postMessage把数据传递给内容脚本。

2. 步骤1：注入页面脚本捕获window.t #

在content.js中创建并插入一段脚本到页面的DOM，这段脚本会在页面上下文执行，能直接访问window.t：

// content.js
// 注入页面上下文的脚本
const injectScript = document.createElement('script');
injectScript.textContent = `
  // 和页面更新频率保持一致，每1000ms检查一次t
  setInterval(() => {
    // 确保t存在再发送
    if (typeof window.t !== 'undefined') {
      // 向内容脚本发送消息，限制为当前域名更安全
      window.postMessage(
        { type: 'GLOBAL_T_UPDATE', data: window.t },
        location.origin
      );
    }
  }, 1000);
`;
document.head.appendChild(injectScript);

3. 步骤2：内容脚本接收数据并转发 #

内容脚本监听页面发送的消息，拿到window.t的值后，转发给后台脚本（background.js）：

// content.js 继续添加
// 监听来自页面脚本的消息
window.addEventListener('message', (event) => {
  // 验证消息来源和类型，避免接收无关消息
  if (event.source !== window || event.data.type !== 'GLOBAL_T_UPDATE') {
    return;
  }

  const tValue = event.data.data;
  // 转发给后台脚本
  chrome.runtime.sendMessage({
    type: 'T_VALUE',
    data: tValue
  });
});

4. 步骤3：后台脚本存储并同步数据 #

后台脚本（background.js）负责存储最新的t值，并在弹窗打开时同步数据：

// background.js
let latestT = null;

// 接收内容脚本发来的t值
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch (message.type) {
    case 'T_VALUE':
      latestT = message.data;
      // 广播更新，让弹窗能实时接收
      chrome.runtime.sendMessage({
        type: 'T_UPDATED',
        data: latestT
      });
      break;
    case 'GET_LATEST_T':
      // 弹窗请求最新值时返回
      sendResponse({ latestT });
      break;
  }
});

// 处理弹窗的长连接，确保实时同步
chrome.runtime.onConnect.addListener((port) => {
  if (port.name !== 'popup_sync') return;

  // 弹窗打开时立即发送最新值
  if (latestT) {
    port.postMessage({ type: 'T_UPDATED', data: latestT });
  }

  // 监听后续更新并转发给弹窗
  const forwardToPopup = (msg) => {
    if (msg.type === 'T_UPDATED') {
      port.postMessage(msg);
    }
  };
  chrome.runtime.onMessage.addListener(forwardToPopup);

  // 弹窗关闭时清理监听
  port.onDisconnect.addListener(() => {
    chrome.runtime.onMessage.removeListener(forwardToPopup);
  });
});

5. 步骤4：弹窗展示实时数据 #

弹窗页面（popup.html）和弹窗脚本（popup.js）负责展示最新的t值：

popup.html #

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 300px; padding: 15px; }
    .t-container { margin-top: 10px; white-space: pre-wrap; font-family: monospace; }
  </style>
</head>
<body>
  <h3>全局变量t实时值：</h3>
  <div id="t-display" class="t-container">等待数据...</div>
  <script src="popup.js"></script>
</body>
</html>

popup.js #

// popup.js
const tDisplay = document.getElementById('t-display');

// 和后台建立长连接，接收实时更新
const port = chrome.runtime.connect({ name: 'popup_sync' });

port.onMessage.addListener((message) => {
  if (message.type === 'T_UPDATED') {
    // 格式化JSON，让展示更清晰
    tDisplay.textContent = JSON.stringify(message.data, null, 2);
  }
});

// 弹窗打开时主动请求最新值
chrome.runtime.sendMessage({ type: 'GET_LATEST_T' }, (response) => {
  if (response?.latestT) {
    tDisplay.textContent = JSON.stringify(response.latestT, null, 2);
  }
});

6. 清单文件（manifest.json）配置 #

确保扩展的清单文件正确声明所需权限和组件：

{
  "manifest_version": 3,
  "name": "捕获全局变量t",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标域名/*"], // 替换为你要监控的页面域名
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

关键注意事项 #

• 消息类型验证：始终检查message.type和消息来源，避免接收恶意或无关消息。
• 域名限制：在postMessage中指定目标域名（如location.origin）比用*更安全。
• 性能优化：如果页面更新t的频率不确定，可以改用Object.defineProperty监听t的变化，而不是固定间隔轮询。

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