如何用JavaScript用户脚本提取Twitter中的关联推文链接？

现象描述 #

• 发现一条链接推文（ID：1586238115223568384），点击后会跳转到另一条被链接推文（ID：1585913960741609472）
• 跳转未使用<a href>或同类标签，鼠标悬停时浏览器左下角不显示目标URL
• 在链接推文的页面静态HTML中，无法搜索到被链接推文的ID字符串1585913960741609472

疑问 #

1. 如何在链接推文页面提取出被链接的推文？
2. 这种隐藏跳转目标的行为是否是Twitter通过JavaScript实现，导致用户脚本无法直接访问？

附带元素截图：

解决方案与原理说明 #

一、为什么静态HTML里找不到目标ID？ #

这种跳转确实是Twitter通过前端JavaScript动态处理实现的：

• 页面初始渲染的静态HTML不会直接包含目标推文的ID或URL，跳转目标是在页面加载完成后，通过JS从后端API、页面隐藏的JSON数据块中动态获取的
• 这类动态生成的内容不会出现在初始HTML源码里，所以直接搜索源码找不到目标ID

二、提取被链接推文的具体方法 #

1. 浏览器抓包获取API数据

打开浏览器开发者工具的「网络」面板，刷新链接推文页面：

• 筛选XHR/Fetch类型的请求，找到包含推文关联数据的接口（通常路径包含/api/或/tweet/关键字）
• 查看接口返回的JSON响应，里面会包含当前推文关联的目标推文ID或完整跳转链接

2. 控制台直接读取动态挂载的数据

在链接推文页面打开开发者工具的「控制台」：

• 先定位触发跳转的元素（比如截图中的推文卡片），可以用document.querySelector('[data-testid="tweet"]')快速定位
• 由于Twitter用React渲染页面，元素上会挂载__reactProps$这类内部属性，展开后可以找到关联的目标推文元数据，从中提取ID或链接

3. 用户脚本的适配方案

如果要通过Tampermonkey等用户脚本自动提取，需要注意：

• 不要直接解析静态HTML，要等待页面JS完全加载完成（可以用MutationObserver监听元素变化，或者设置合理的延迟）
• 从页面的全局状态、React组件实例中提取关联数据，比如通过遍历元素的React属性获取目标ID

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