https://github.com/xiaoluoboding/chrome-web-bookmark

One-click turn any link into a visual web bookmark, and it looks Like Twitter cards or Notion web bookmark.
https://github.com/xiaoluoboding/chrome-web-bookmark

bookmark card chrome-extension extension notion-web-bookmark twitter-card

Last synced: 7 days ago
JSON representation

One-click turn any link into a visual web bookmark, and it looks Like Twitter cards or Notion web bookmark.

• Host: GitHub
• URL: https://github.com/xiaoluoboding/chrome-web-bookmark
• Owner: xiaoluoboding
• License: mit
• Created: 2021-08-11T14:55:15.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T02:46:18.000Z (6 months ago)
• Last Synced: 2024-05-21T03:49:46.731Z (6 months ago)
• Topics: bookmark, card, chrome-extension, extension, notion-web-bookmark, twitter-card
• Language: Vue
• Homepage: https://chrome.google.com/webstore/detail/web-visual-bookmark/jcfidgjldodhkpiebmemhnhgpgdakham/
• Size: 3.22 MB
• Stars: 41
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• project-awesome - xiaoluoboding/chrome-web-bookmark - One-click turn any link into a visual web bookmark, and it looks Like Twitter cards or Notion web bookmark. (Vue)

README

        
# Chrome Extension - Web Visual Bookmark

> One-click turn any link into a visual bookmark, and it looks like `Twitter` cards or `Notion` web bookmark.

## Preview

|     Bookmark Layout      |                Light Mode                |                Dark Mode                 |

| :----------------------: | :--------------------------------------: | :--------------------------------------: |

|    Twitter card like     | ![](./assets/chrome-web-bookmark_03.png) | ![](./assets/chrome-web-bookmark_04.png) |

| Notion web bookmark like | ![](./assets/chrome-web-bookmark_02.png) | ![](./assets/chrome-web-bookmark_01.png) |

## Concepts

This extension is built on top of [metafy](https://github.com/xiaoluoboding/metafy), which provides serverless api to fetch websites metadata easily and turn the metadata into the visual bookmark. like Twitter does.

## Articles

- [《How to create a visual web bookmark?》](https://xlbd.me/posts/how-to-create-a-visual-web-bookmark)

## Features

- 🔮 Turn any tabs into a visual web bookmark

- 🐦 Twitter card like

- 🔖 Notion web-bookmark like

- 🖼️ Copy image to your clipboard

- 📷 Toggle the QRCode on the bookmark

- 🌛 Dark mode support

## Usage

### Install

Install the dependencies

```bash

yarn

# or

pnpm install

```

### Development

Run the development server

```bash

yarn dev

# or

pnpm dev

```

Then load uppacked extension in browser with the `extension/` folder.

### Production

Build the extension

```bash

yarn build

# or

pnpm build

```

Then load uppacked extension in browser with the `extension/` folder.

## Template

[This repo is created from this template on GitHub](https://github.com/xiaoluoboding/vitesse-modernized-chrome-ext/generate).

## License

[MIT](./LICENSE) - [@xiaoluoboding](https://github.com/xiaoluoboding)