Octotree

Browser extensions (Chrome, Firefox and Safari) to display GitHub code in tree format. Useful for developers who frequently read source in GitHub and do not want to download or checkout too many repositories. Features:

• Easy-to-navigate code tree like IDEs
• Fast browsing with pjax
• Support private repositories (require personal access token)

Install on Chrome

• Download and install Octotree from the Chrome store
• Navigate to any GitHub project (or just refresh this page as an example)
• The code tree should show as follows:

Install on Firefox and Safari

I'm in the process of submitting the extensions to Mozilla and Safari stores. Meanwhile, you can install the prebuilt extensions located in the dist folder.

• Firefox: drag octotree.xpi to the browser and follow the instructions
• Safari: drag octotree.safariextz to the browser and follow the instructions

GitHub API Rate Limit

Octotree uses GitHub API to retrieve repository metadata. By default, it makes unauthenticated requests to the GitHub API. However, there are two situations when requests must be authenticated:

• You access a private repository
• You exceed the rate limit of unauthenticated requests

When that happens, Octotree shows the screen below to ask for your GitHub personal access token. If you don't already have one, create one, then copy and paste it into the textbox.

Alternatively, you can manually enter or update the token by following these steps:

• Navigate to any GitHub page
• Open the Chrome (or Safari, Firefox) developer console
• Execute the following line:

localStorage.setItem('octotree.github_access_token', JSON.stringify('REPLACE WITH TOKEN'))

Contribution

There are several improvements that can be made to Octotree. Contribution is very welcome.

• Hide sidebar when navigating to non-code pages like Issues, PRs...
• Make the width of the sidebar resizable.
• Allow docking sidebar to either the left or right side.
• Allow users to enter access token any time.
• Synchronize (two-way) between sidebar selection and GitHub selection.
• Show progress indicator while the code tree or a file is being loaded (with Pjax). (Showing spinner in the toggle button?)

Credit

• Icon by pstadler
• Thanks to many people submitting pull requests, reporting bugs and suggesting ideas here and on HN