kiddofun / octotree

GitHub code tree on steroids

Octotree

Browser extension (Chrome, Firefox, Opera and Safari) that displays a code tree on GitHub. Great for exploring project source code without having to download many repositories to your machine.

Features

• Easy-to-navigate code tree, just like in IDEs
• Fast browsing with pjax
• Support private repositories (see instructions)

Features of Octotree Pro

• Dark mode
• File search
• Change docking position
• Multiple GitHub accounts
• Support GitHub Enterprise on Chrome, Opera and Firefox
• Official Safari version (Safari doesn't support GitHub Enterprise)

Learn why we build Octotree Pro here. Subscribe to Octotree Pro on our website.

Install Octotree

• Octotree: Chrome, Firefox, Opera
• Octotree Pro: Chrome, Firefox, Opera, Safari

Settings

Access Token

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

• You access a private repository
• You exceed the API rate limit

When that happens, Octotree will ask for your GitHub personal access token. If you don't already have one, create one, then copy and paste it into the token textbox in the Settings screen. Note that the minimal scopes that should be granted are public_repo and repo (if you need access to private repositories).

No BS Policy: Octotree doesn't collect/share/care about your data at all. It stores the access token in your browser local storage and uses it only to communicate with GitHub API (see the code that does that here).

Access tokens are stored in the browser's local storage, only enter access tokens when you use a trusted computer.

Hotkeys

Hotkeys to pin or unpin the sidebar. You can enter multiple hotkeys by separating them with a comma.

• Supported modifiers: ⇧, shift, option, ⌥, alt, ctrl, control, command, and ⌘.
• Supported special keys: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete and f1 through f19.

Learn more at keymaster.

Others

• Load entire tree at once: if checked, load the entire code tree at once. For large repos where Octotree can't load it in a single request, Octotree ignores this settings and lazily-loads the repo.
• Show in non-code pages: if checked, show Octotree in non-code pages such as Issues and Wiki.
• Show file-specific icons: if checked, show different icons for different file types.
• Show only pull request changes: if checked, show only the change set of a pull request.

Octotree Pro Settings

GitHub Enterprise

Note: GitHub Enterprise is not supported on Safari.

After installing Octotree Pro, navigate to your GitHub Enterprise site. Right-click the Octotree Pro icon in the browser bar (see the image below) and select "Enable Octotree Pro on this domain". The page should refresh and Octotree Pro sidebar should show up. Alternatively, you can disable Octotree Pro on a domain by selecting "Disable Octotree Pro on this domain".

Multiple GitHub Accounts

If you have multiple GitHub accounts with access to different private repositories, you will need to let Octotree know which access token to use for which account. This feature allows you to enter additional GitHub accounts and corresponding tokens. When you login to GitHub with an account, Octotree will use the matching token to make API requests to GitHub. If you don't login to GitHub or if the account you login is not in the account list, Octotree will use the default access token.

Go to Settings and click the + icon to add more accounts.

Change Docking Position

You can change the location of the Octotree sidebar to either the left or right side of the screen. Click the dock icon located at the bottom of Octotree to toggle the sidebar location.

Dark Mode

Click the dark mode icon located at the bottom of Octotree to toggle dark mode.

File Search

Click the search icon and type in search query. Note: this feature requires the "Load entire tree at once" option to be selected.

Contribution

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

Credits

Octotree and Octotree Pro use the following open-source software:

• jQuery
• jQuery UI
• jstree
• file-icons
• keymaster
• jquery-pjax
• github-dark