GitHub Dashboard 扩展终极指南：从安装到定制的完整路径

GitHub Dashboard 扩展是一款专为 GitHub 活动仪表盘设计的浏览器工具，能够帮助开发者精准筛选关注的事件类型，提升信息获取效率。无论是团队协作中的代码提交追踪，还是个人关注项目的动态监控，这款轻量级扩展都能提供高效的事件过滤解决方案。

核心功能解析

🔍 事件过滤引擎：三步打造个性化仪表盘

如何在海量 GitHub 活动中快速定位关键信息？GitHub Dashboard 扩展通过直观的过滤面板实现精准筛选：

1. 智能上下文识别
   扩展自动检测当前页面上下文（个人或组织），并动态加载对应的过滤选项。个人页面默认显示「关注仓库」「代码提交」「发布版本」等 16 类事件，组织页面则聚焦「代码」「发布」「对话」「管理」四大核心维度。

2. 交互式过滤面板
   点击页面顶部的「Filter」按钮展开过滤菜单，通过勾选框启用/禁用特定事件类型。支持 Shift+点击快速取消其他选项，实现单类型事件聚焦。

3. 偏好记忆功能
   用户的过滤设置会自动保存在本地存储中，下次访问时无需重复配置。数据存储路径：localStorage.getItem('dashboard:select:${context}')

💡 效率技巧：对于高频使用的过滤组合（如仅显示代码提交和 Issues），可通过 Shift+点击快速切换单一类型，提升操作效率。

⚙️ 跨模块协作机制：内容脚本与存储系统的协同

扩展的核心能力源于各模块间的高效通信：

• content.js 与 dashboard.js 的联动
  内容脚本负责 DOM 元素识别与事件监听，当用户触发过滤操作时，通过 updateClasses() 方法动态修改仪表盘样式类，实现事件显示/隐藏。关键代码路径：dashboard.js:67-72

• 本地存储优化策略
  关注用户列表每 24 小时通过 GitHub API 自动更新，并缓存至本地。这种设计既保证数据新鲜度，又避免频繁 API 请求导致的性能问题。数据更新逻辑：dashboard.js:148-166

⚠️ 注意：扩展依赖 GitHub 页面 DOM 结构，若平台更新导致过滤功能失效，可尝试清除浏览器缓存或重新安装扩展。

环境适配方案

浏览器兼容性配置：Chrome 与 Firefox 差异对比

配置项	Chrome 版	Firefox 版
manifest 版本	v2	v2
权限声明	https://github.com/*	https://github.com/*
背景脚本	background.js	background.js
弹出窗口	popup.html	popup.html
安装路径	chrome/	firefox/

3 步完成跨浏览器部署

1. Chrome 安装

   1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/gi/github-dashboard
   2. 打开 chrome://extensions/，启用「开发者模式」
   3. 选择「加载已解压的扩展程序」，指向项目 chrome/ 目录

2. Firefox 安装

   1. 重复步骤 1 克隆仓库
   2. 打开 about:debugging#/runtime/this-firefox
   3. 点击「临时载入附加组件」，选择 firefox/manifest.json

3. 验证安装
   访问 GitHub 仪表盘页面（https://github.com/dashboard），顶部出现「Filter」按钮即表示安装成功。

快速上手指南

基础操作：5 分钟掌握核心过滤功能

1. 打开过滤面板
   在 GitHub 仪表盘页面点击顶部「Filter」按钮，展开事件类型列表。

2. 配置过滤规则
   根据需求勾选事件类型（如「Code」「Releases」），面板会实时更新仪表盘显示内容。

3. 使用高级功能

   • Shift+点击单选：按住 Shift 键点击某事件类型，自动取消其他选项
   • 偏好记忆：刷新页面后过滤状态保持不变
   • 上下文适配：切换个人/组织页面时，过滤选项自动匹配场景

样式定制入口→dashboard.css

如需调整仪表盘外观，可修改 dashboard.css 文件自定义样式：

• 修改事件卡片样式：调整 .news .alert 相关规则
• 优化过滤面板布局：修改 .dropdown-menu 类的尺寸与边距
• 适配深色模式：添加 @media (prefers-color-scheme: dark) 规则

常见问题排查

🚩 问题 1：过滤按钮未显示

可能原因：GitHub 页面结构更新
解决方案：

1. 强制刷新页面（Ctrl+Shift+R）
2. 检查扩展是否有权限访问 GitHub：chrome://extensions/ → 查看「网站访问权限」
3. 清除 localStorage 缓存：F12 打开控制台 → Application → Local Storage → 删除 dashboard:select:* 相关键值

🚩 问题 2：事件过滤不生效

可能原因：事件类型 CSS 类变化
解决方案：

1. 确认 dashboard.js 中 eventClasses 数组包含最新事件类名
2. 执行 localStorage.removeItem('dashboard:following') 重置关注用户缓存
3. 检查浏览器控制台是否有 JavaScript 错误（F12 → Console）

🚩 问题 3：Firefox 中性能卡顿

可能原因：MutationObserver 监听范围过广
优化方案：

1. 打开 dashboard.js，修改 specifyTimelineEvents() 方法
2. 缩小观察目标范围：将 dashboard.querySelector('#dashboard .news') 改为更具体的选择器
3. 降低监听频率：添加 {attributes: false, characterData: false} 配置项

通过以上方案，可解决 90% 以上的常见使用问题。如遇到其他异常，建议提交 issue 至项目仓库获取支持。

---

GitHub Dashboard 扩展以轻量级设计实现了强大的事件过滤功能，通过模块化架构确保跨浏览器兼容性，同时保留高度可定制性。无论是日常开发中的信息筛选，还是团队协作中的活动监控，这款工具都能显著提升 GitHub 工作流效率。立即安装体验，让你的 GitHub 仪表盘更具个性化！