https://github.com/masonmcelvain/hop

A browser extension featuring aesthetic bookmarks
https://github.com/masonmcelvain/hop

bookmark-manager browser-extension chrome-extension firefox-addon

Last synced: 6 months ago
JSON representation

A browser extension featuring aesthetic bookmarks

• Host: GitHub
• URL: https://github.com/masonmcelvain/hop
• Owner: masonmcelvain
• License: mit
• Created: 2021-04-15T02:45:03.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-27T19:36:13.000Z (over 1 year ago)
• Last Synced: 2024-05-01T18:34:19.937Z (over 1 year ago)
• Topics: bookmark-manager, browser-extension, chrome-extension, firefox-addon
• Language: TypeScript
• Homepage: https://usehop.app
• Size: 2.87 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


# Hop

[link-chrome]: https://chrome.google.com/webstore/detail/hop/djdlkcbfbdebfaoakhnoienanaakgccd "Version published on Chrome Web Store"

[link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/hop/ "Version published on Mozilla Add-ons"

[][link-chrome] [][link-chrome]

[][link-firefox] [][link-firefox]

Hop is a browser extension that stores links to your favorite sites in a more visually pleasing way than traditional bookmarks. Hop will try to find an icon for each link automatically, but you can use your own image if you prefer.

It's available for use on the [Chrome Web Store](https://chrome.google.com/webstore/detail/hop/djdlkcbfbdebfaoakhnoienanaakgccd) and as a [Firefox Add-on](https://addons.mozilla.org/en-US/firefox/addon/hop/).

## Opening Issues 🥕

[![Playwright Tests](https://github.com/masonmcelvain/hop/actions/workflows/playwright.yml/badge.svg?branch=main)](https://github.com/masonmcelvain/hop/actions/workflows/playwright.yml)

[![Type Check](https://github.com/masonmcelvain/hop/actions/workflows/tsc.yml/badge.svg)](https://github.com/masonmcelvain/hop/actions/workflows/tsc.yml)

[![Lint](https://github.com/masonmcelvain/hop/actions/workflows/lint.yml/badge.svg)](https://github.com/masonmcelvain/hop/actions/workflows/lint.yml)

[![Style](https://github.com/masonmcelvain/hop/actions/workflows/style.yml/badge.svg)](https://github.com/masonmcelvain/hop/actions/workflows/style.yml)

If you'd like to see a new feature or you've spotted a bug, please check to see if there are any [closed issues](https://github.com/masonmcelvain/hop/issues?q=is%3Aissue+is%3Aclosed) that might address your concern before opening a new issue on this repository.

## Contributing 🐰

If there's an issue you'd like to tackle, please fork this repository, make your changes in a series of well documented commits, and open a pull request. I appreciate your interest in contributing to this project.

### Installation

- Clone the repository and navigate to it's root directory with `git clone https://github.com/masonmcelvain/hop.git && cd hop`

- Install dependencies with `pnpm install`

   - You'll need [Node.js](https://nodejs.org/en/download/) installed and `pnpm` enabled, see `package.json` for the specific versions.

   - `nvm use` for [Node Version Manager](https://github.com/nvm-sh/nvm) is supported.

### Running a dev server

- Start a development server with `pnpm dev:chrome` or `pnpm dev:firefox`.

- Special Chrome instructions:

   - Navigate to `chrome://extensions` in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions.

   - Check the box next to Developer Mode.

   - Click Load Unpacked Extension and select the `dist/chrome` directory in the top level directory of this repository.

- Special Firefox instructions:

   - You can preview the extension with `pnpm preview:firefox`.

   - To install the extension manually:

      - Visit `about:debugging#/runtime/this-firefox`.

      - Click "Load Temporary Add-on..."

      - Select the generated `firefox.zip` file. The extension should now be installed.

- Open the extension in your browser to see the app.

   - Note: When you make code changes, you most close the extension popup (i.e. click anything but the extension window) and re-open it to see those changes reflected.

### Environment Variables

- No additional environment variables are need to develop or build the app. Should you need to add or override any though, place them in a `.env` file and they will be automatically loaded into package scripts.

### Running tests

- Run [Playwright tests](https://playwright.dev/docs/intro) with `pnpm test`.

### Building for production

- Run `pnpm build`, which will output minified projects in `dist/chrome`, `dist/firefox`, and zipped projects in `dist/chrome.zip` and `dist/firefox.zip`.