Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/msmolens/treetop
Treetop browser extension
https://github.com/msmolens/treetop
bookmarks browser-extension chrome-extension firefox firefox-extension webextension
Last synced: about 4 hours ago
JSON representation
Treetop browser extension
- Host: GitHub
- URL: https://github.com/msmolens/treetop
- Owner: msmolens
- License: mit
- Created: 2020-11-06T22:04:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-03T22:43:01.000Z (8 months ago)
- Last Synced: 2024-06-04T01:15:42.329Z (8 months ago)
- Topics: bookmarks, browser-extension, chrome-extension, firefox, firefox-extension, webextension
- Language: TypeScript
- Homepage:
- Size: 2.85 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/msmolens/treetop/actions?query=workflow%3ACI)
#  Treetop
Treetop is a browser extension that provides a high-level live view of your bookmarks:
## Installation
- Google Chrome: https://chromewebstore.google.com/detail/treetop/gbjocfinjldepimidjiooalbgajjikpp
- Firefox: https://addons.mozilla.org/firefox/addon/tr/
## Usage
### Getting started
- Open Treetop by clicking its icon in the toolbar.
- Treetop shows all your bookmarks on a single page.
### Always up-to-date
- Treetop updates automatically as you browse.
- Recently visited bookmarks have a larger font.
### Find and edit your bookmarks
- Search for bookmarks by name or URL.
- Right-click to edit or delete bookmarks and folders.
### Customize
- Click the Preferences button to customize Treetop's display.
- Click on a folder to make it the root folder.
## Development
### Requirements
- [Node.js](https://nodejs.org/) 20.x or greater
- Google Chrome or Firefox browser
### Prerequisites
Install dependencies:
```
npm install --global web-ext
npm install
```
### Commands
| Command | Description |
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `npm run build:watch` | Build for development, watching for file changes. |
| `TREETOP_TARGET=chrome npm run build` | Build for Chrome. |
| `TREETOP_TARGET=firefox npm run build` | Build for Firefox. |
| `npm run check` | Check for unused CSS, a11y issues, and compiler errors with [svelte-check](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check). |
| `npm run lint` | Check code for linting errors. |
| `npm run lint:fix` | Fix linting errors. |
| `npm run prettier` | Check code for formatting errors. |
| `npm run prettier:fix` | Fix formatting errors. |
| `npm test` | Run tests. |
| `web-ext run --source-dir dist/chrome --target chromium` | Start Chrome and load the extension temporarily. |
| `web-ext run --source-dir dist/firefox` | Start Firefox and load the extension temporarily. |
| `web-ext build --source-dir dist/chrome` | Package the built extension for Chrome. |
| `web-ext build --source-dir dist/firefox` | Package the built extension for Firefox. |
### Core Technologies
#### Development
- [Svelte](https://svelte.dev/): Component framework.
- [TypeScript](https://www.typescriptlang.org/): Typed JavaScript.
- [Vite](https://vitejs.dev/): Build tool.
- [Svelte Material UI](https://sveltematerialui.com/): Material UI components for Svelte.
- [ESLint](https://eslint.org/): Static analyzer.
- [Prettier](https://prettier.io/): Code formatter.
- [web-ext](https://github.com/mozilla/web-ext): Command line tool for web extensions.
#### Testing
- [Vitest](https://vitest.dev/): Testing framework.
- [DOM Testing Library](https://testing-library.com/): Framework to test Svelte components.
## History
Treetop is a modern remake of my [My Portal](https://github.com/msmolens/myportal)
XUL/XPCOM Firefox extension.