Octotree，真的是一个挺不错的Chrome插件，使用它，我们在github上看代码就更加的方便。

如图：

Octotree插件
1. 概述
Octotree插件能够以树形展示 Github 项目、码云项目代码。

安装之后，浏览托管在Github上的项目，可看到左侧的树形结构，更方便查看代码。
2.  谷歌Chrome浏览器安装扩展插件
几种常见的Chrome浏览器安装扩展插件安装方法。

因为火狐的比较简单，可以在线安装，就不做介绍了。
2.1 下载谷歌浏览器

Windows版Chrome
Mac版Chrome

2.2 安装
2.2.1 离线安装
1. 下载插件
在谷歌商店或者CrxDL搜索下载待安装的Chrome插件，下载完成后，将下载的压缩包解压，我们以Octotree插件为例：
谷歌商店，搜索框中搜索 octotree



很可惜，点击安装下载之后，发现octotree插件版本太低。目前最新版本是3.0.10版本。


CrxDL网站下载octotree插件


2. 安装插件
（1）打开Chrome浏览器，复制chrome://extensions/ 到浏览器地址打开，点击右上角开启开发者选项，最后将文件夹内.crx后缀的离线安装包拖动到打开的页面，松手，根据提示完成安装。
（2）如果安装插件时遇到程序包无效：“CRX_HEADER_INVALID”等错误，可以查看：安装Chrome插件.Crx提示程序包无效：“CRX_HEADER_INVALID”
（3）在第二种方法中方法1与（1）方法重复，补充第三种方法。

github上下载源码

插件链接


解压到任意盘


D:\Git-2.22\octotree-3.0.10


按照README.md说明文档操作


Install node 8 or above
Run npm install to install dependencies
Run npm start to watch code changes and build unpacked extensions
Load the unpacked extensions in the tmp folder (check instructions of the specific browser)
Please follow existing style for new code


查看生成的目录结果


从chrome://extensions/中按照截图操作



选择D:\Git-2.22\octotree-3.0.10\tmp\chrome



这个步骤中可以看到有firefox（火狐），opera（欧朋）文件夹，所以在这两个浏览器中也可以使用该种方法离线进行安装。

至此就会看到Octotree插件成功安装：


2.2.2 在线安装
PS：目前在线安装，国内不好直接安装，建议离线安装。
复制下方Chrome官方插件应用商店的地址https://chrome.google.com/webstore/category/extensions?hl=zh-CN，在浏览器器地址栏打开。（国内网络无法直接打开，需安装网络工具,哈哈，很可惜，这个链接不能打开是因为谷歌被国内封杀，你可以翻墙）
3. 预览效果
谷歌浏览器中浏览github上查看octotree源码的效果图。



这个源码环境搭建的是免费版本的octotree，它也有octotree pro收费版的，功能更多，可以参考octotree pro ，不过可以免费使用octotree pro 30天哦，喜欢的小伙伴可以尝试一下啦！

使用octotree，出现如下报错

Error: Connection error octotree

Cannot connect to website. If your network connection to this website
解决方法：需要在github设置访问token

登录github，打开https://github.com/settings/profile，点击Developer settings


解决后效果：

类型：谷歌插件
      优势：像 IDE 那样方便地浏览代码，如下图。


下载地址：http://www.cnplugins.com/devtool/octotree/download.html。
      安装步骤：https://www.cnblogs.com/12yang-ting/p/7485264.html。