强烈推荐的GitHub浏览插件-Octotree

背景

GitHub是全球最大的代码托管平台，在工作中或者学习中经常会用到该网站去浏览代码、下载代码或者托管代码。当然国内也有很多很多类似的平台如码云Gitee、Coding等、甚至工作中处于安全性考虑都会自己搭建git环境，比如本地GitLab等，但是GitHub的地位是无法撼动的。基本上所有的开源框架都会将代码发布到GitHub上供开发者去使用，并且收集bug以及交换意见等。

抛开国内访问慢甚至有时打不开这个大环境因素，日常在使用GitHub中最大的痛点就是不能像我们平时开发使用IDE一样，根据文件夹或者包去一层一层展开，先观察包/类等，再去点击某一文件，最终将文件内容展示出来。GitHub只能一次一次点击包，每一次点击都会发起请求，将子包的内容在展示出来，比较麻烦，也比较好使，对于开发人员来说比较不友好。

而Octotree的出现可以很好的解决这个问题。

介绍

Octotree是一款浏览器插件，可以按照树状图的方式为我们展示某一项目的结构，以及提供了快速搜索、变更预览等功能。

Octotree官网为octotree.io，在记录这篇文章时，是支持五款常用浏览器的，分别为Chrome、Firefox、Opera、Edge以及Safari。

安装之后浏览GitHub的效果如下图所示

可以看到，就如同我们的IDE一样，可以在左侧有一个树形的结构，我们可以展开、关闭某一包，也可以点击类，这时才会真正发起请求，GitHub把其相关内容展示出来。

主要功能

Octotree有很多很棒的功能，包括但不限于

• 类IDE的树型方式浏览项目结构
• 快速搜索包/类
• 20+款好看的主题皮肤
• 自定义快捷键
• 文件内容变更行数预览
• 书签功能，存储感兴趣的文件链接
• 更改GitHub的文字样式以及大小

具体使用方式请参照使用方式章节。

安装方法

1. 在线安装

官网只介绍了在线安装，点击想要安装的浏览器版本，相应的点击后续操作即可，非常简单。

由于国内无法访问Google，也就无法访问Google Web Store来安装了，这里简单介绍一下Microsoft Edge的在线安装。

首先打开Edge浏览器，进入官网，点击Edge浏览器Logo。

在弹出的应用市场界面中点击右上角GET

弹出的提示框中点击添加扩展，等待安装完成即可。

2. 离线安装

相信我们平时开发使用最多的是Chrome，而偏偏国内无法访问谷歌的相关网站，所以只能采取离线安装的方式。

2.1 下载插件

Chrome插件的扩展名为.crx，我们可以通过crxdl.com来下载该插件。打开该网址，搜索框中输入octotree，点击搜索。

找到最新版本，点击下载

也可以通过上传的资源0积分下载该插件：点击下载

2.2 安装插件

点击Chrome的右上方的扩展程序按钮->管理扩展程序（不同浏览器版本可能不同）

或点击右上方...->更多工具->扩展程序

将解压后的.crx插件拖拽至该扩展程序页面

点击继续

在弹出的窗口中点击添加扩展程序，安装完毕

使用方式

⭐️表示这个功能很好用

以下这些功能有些是收费的，具体区别参考免费版与收费版的区别章节。默认情况下可以体验15天Pro版本。

1. 免登录可使用

以下几个功能无需登陆Octotree就可以使用

1.1 ⭐️树形结构展示

安装成功之后需要关闭浏览器重新启动，之后访问GitHub随便找一个项目如Spring Framework看效果

可以看到左侧已经有树形菜单了，我们可以更方便的去浏览整个项目

1.2 ⭐️固定窗口

默认情况下左侧树型菜单是隐藏的，会有一个小浮动窗口在左侧，鼠标移上去之后才会将菜单展现出来

如果想一直显示，那么可以点击Octotree的菜单中的设置按钮旁的Pin The Bar即可

1.3 ⭐️主题皮肤

超好用的功能，玩游戏的时候舍不得钱去买一个好看的皮肤，那就在其他地方换上喜欢的皮肤吧❤️。

GitHub目前自带了四款经典皮肤，白色主题，夜晚模式主题也都有，如果都不满意的话，Octotree提供了20多款好看的皮肤可供选择。但是这是专业版才有的，默认刚登入的话是有15天试用期，试用期之后就只有一个皮肤

点击Octotree窗体下方的Change color theme进行选择。

1.4 调整菜单显示页面

默认情况下Octotree窗体不是在所有页面中显示的，只在Code页面中显示，比如点击Issues或者其他页签，就不会显示了。

如果想调整，可以调整Octotree设置中的Show in，一共有四个选项

• Code & pulls
• Code
• Pull Request
• All Pages
  
  

1.5 快捷键

在设置中可以添加/修改Hotkeys，来快捷呼出Octotree窗体。如我这里添加了alt + x，就可以实现快速打开/关闭窗体了。

1.6 更改Octotree窗体位置

默认情况下Octotree窗体会在浏览器左侧出现，可以切换在左侧还是在右侧出现

2. 登录可使用

以下几个功能需要登陆Octotree方可使用。

点击Octotree的设置，点击Login with Github

如果已经登陆GitHub，就会自动登陆，否则就需要输入账号密码了。

登陆之后我们可以看Octotree窗体中的内容变多了

2.1 ⭐️文件搜索

可以根据文件名去搜索，有点类似于IDEA中的双击shift
在Octotree结构窗口中点击右上方放大镜search按钮

在弹出的输入框中输入我们想要搜索的文件，如我想搜索ApplicationContext，就会把包含这个名称的包和文件全部列出来

也支持快捷键来弹出输入框，默认为↑ + s，如热键冲突可以根据需要进行修改

2.2 全部展开/收缩

点击右上方展开收缩按钮即可，注意如果文件过多，可能会卡

2.3 懒加载

如果开启，那么树形菜单默认初始只加载最开始的根菜单，点击某一个包之后才会一点一点去加载，可以提升初次加载速度，个人感觉用处不大。

2.4 预览Pull Request

可以在不关闭当前页面浏览代码的基础上进行PR预览，个人感觉用处不大

2.5 ⭐️书签

这个功能非常好用，提供了类似浏览器的收藏功能。
比如浏览一个类的内容，想收藏该文件链接方便下次浏览，就可以点击该文件旁的书签🔖按钮。

当然也可以收藏项目，这点与star类似

收藏之后就可以在Octotree的书签🔖中查看


可以看到还有过滤、搜索以及删除功能

2.6 ⭐️调整字体以及图标

可以在设置中的Code Font中设置喜欢的字体以及调整字体大小

免费版与收费版的区别

上述的功能很强大，有些也很实用，但是有一些是收费的，或者有限制，具体如下：

总结

Octotree可以更好的帮助我们去使用GitHub，我在写这篇文章的时候也是刚接触到这个插件，刚上手就玩了好久。虽然有些功能都是收费的，但是免费情况下也不影响核心功能的使用，真的是笔者感觉为数不多的神器之一，也强烈推荐给大家使用。