Chrome浏览器路径追踪与历史树形可视化需求问询

一、符合需求的Chrome扩展推荐 #

试过你提到的几款扩展后，以下两个工具更接近你要的树形历史视图：

• Tab History Visualizer：核心记录每个标签页的创建来源（即从哪个标签页的链接打开），能生成层级分明的树形视图，支持导出JSON格式的历史结构数据，方便后续自行处理。
• Session History Manager：虽主打会话管理，但可导出当前/历史会话内的标签页关联关系，能辅助构建特定问题解决过程中的浏览分支路径。

二、Python实现方案（轻量高效，无需Selenium） #

直接操作Chrome的历史数据库是最直接的方式，比模拟浏览更高效，步骤如下：

1. 读取Chrome历史数据库 #

Chrome的历史数据存储在SQLite数据库中，路径：

• Mac：~/Library/Application Support/Google/Chrome/Default/History
• Windows：C:\Users\<你的用户名>\AppData\Local\Google\Chrome\User Data\Default\History

注意：Chrome运行时会锁定原数据库，需先复制副本再操作：

import shutil
import sqlite3
import pandas as pd

# 替换为你的数据库路径
db_path = "~/Library/Application Support/Google/Chrome/Default/History"
shutil.copy(db_path, "./chrome_history_temp.db")

# 连接副本并查询关联数据
conn = sqlite3.connect("./chrome_history_temp.db")
query = """
SELECT v.visit_id, v.from_visit, u.url, u.title, v.visit_time
FROM visits v
JOIN urls u ON v.url = u.id
ORDER BY v.visit_time DESC
"""
history_df = pd.read_sql(query, conn)
conn.close()

2. 构建树形结构 #

利用visits表中的from_visit字段（父访问记录ID，0表示无父节点），构建父节点到子节点的映射：

# 初始化树形结构，0为根节点（新打开的标签页）
tree = {0: []}
for _, row in history_df.iterrows():
    visit_id = row["visit_id"]
    from_visit = row["from_visit"]
    # 若父节点不在树中，先创建空列表
    if from_visit not in tree:
        tree[from_visit] = []
    tree[from_visit].append({
        "id": visit_id,
        "title": row["title"],
        "url": row["url"],
        "time": row["visit_time"]
    })

3. 可视化（Git风格分支视图） #

若要接近Git Commit History的横向分支样式，推荐用networkx构建有向图，结合Plotly绘制：

import networkx as nx
import plotly.graph_objects as go

# 构建有向图
G = nx.DiGraph()
for parent_id, children in tree.items():
    for child in children:
        # 用标题作为节点名称，避免ID难以识别
        parent_title = "Root" if parent_id == 0 else next(item["title"] for item in history_df[history_df["visit_id"] == parent_id].itertuples())
        G.add_edge(parent_title, child["title"], url=child["url"])

# 生成横向分层布局（类似Git图）
pos = nx.nx_agraph.graphviz_layout(G, prog="dot")

# 准备节点和边的可视化数据
node_x = []
node_y = []
node_text = []
for node in G.nodes():
    x, y = pos[node]
    node_x.append(x)
    node_y.append(y)
    node_text.append(node)

edge_x = []
edge_y = []
for edge in G.edges():
    x0, y0 = pos[edge[0]]
    x1, y1 = pos[edge[1]]
    edge_x.extend([x0, x1, None])
    edge_y.extend([y0, y1, None])

# 绘制图表
fig = go.Figure()
# 添加边
fig.add_trace(go.Scatter(
    x=edge_x, y=edge_y,
    line=dict(width=0.5, color="#888"),
    hoverinfo="none",
    mode="lines"))
# 添加节点
fig.add_trace(go.Scatter(
    x=node_x, y=node_y,
    mode="markers+text",
    text=node_text,
    textposition="top center",
    marker=dict(symbol="circle-dot", size=15, color="#619CFF"),
    hovertext=[G.edges[(n, neighbor)]["url"] for n in G.nodes() for neighbor in G.neighbors(n)],
    hoverinfo="text"))

fig.update_layout(showlegend=False, hovermode="closest")
fig.show()

这个方案能直接从Chrome历史中提取分支关系，生成类似Git的横向树形视图，比Selenium更轻量高效。

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