前言

最近有个同事看到我打开Github项目时，浏览器上的展示效果是树形的，于是他问我这个是什么浏览器插件，我告诉他是Octotree插件。现在我就来介绍介绍这款Octotree插件。

效果对比

1、未安装Octotree插件的效果

首先来看看，如果没有安装Octotree插件来打开Github项目是什么效果？

我们打开square公司开源的retrofit项目，如下图所示：

• Google Chrome 浏览器的效果

  

• Firefox浏览器的效果

2、安装Octotree插件之后的效果

接下来看看，安装Octotree插件之后。打开Github项目是什么效果呢？

我们打开square公司开源的retrofit项目，如下图所示：

• Google Chrome 浏览器的效果

  

• Firefox浏览器的效果

  

可以看出来，Octotree插件可以方便地浏览托管在Github上的项目，可看到左侧的树形结构，像 IDE 那样方便地浏览代码，再也不用每次点一下刷新一下、然后倒退倒退点另一个，非常方便。

Octotree插件的优点

正如 Octotree官网 （地址：https://github.com/buunguyen/octotree）介绍的一样，具有以下优点：

• Easy-to-navigate code tree, just like in IDEs
• Fast browsing with pjax and Turbolinks
• Support private repositories
• Support GitHub and GitLab Enterprise

翻译过来大致是：

• 像使用IDE一样方便的浏览代码的树形结构
• 使用pjax和Turbolinks技术支持快速浏览
• 支持私人仓库
• 支持GitHub和gitlab企业

如何Octotree插件？

1、Google Chrome浏览器安装Octotree插件

打开VPN翻墙，接着打开Chrome商店，搜索Octotree，如下图所示：

然后点击【+ 添加至CHROME】按钮，弹出如下图所示的对话框：

接着点击【添加扩展程序】按钮，开始安装Octotree插件，按照完毕后再打开该页面会显示如下所示：

这个时候Octotree插件已经安装完毕，再次进入之前打开国的square公司开源的retrofit项目，如下图所示：

2、Firefox浏览器安装Octotree插件

Firefox浏览器安装Octotree插件和Google Chrome浏览器安装Octotree插件的步骤都是类似的。

第一步：点开浏览器右上角的菜单按钮，在弹出的菜单中，点击【附加组件】按钮，如下图所示：

然后进入到了如下图所示的页面

接着在搜索框输入关键字 Octotree 进行搜索，搜索结果如下图所示：

点击【安装】按钮进行安装，安装过程如下：

安装完毕后，如下所示：

再次进入之前打开国的square公司开源的retrofit项目，如下图所示：

作者：欧阳鹏 欢迎转载，与人分享是进步的源泉！

转载请保留原文地址：http://blog.csdn.net/ouyang_peng/article/details/52973274