README.md

August 21, 2024 · View on GitHub

Language: :us: :cn:

🔗 Sink Short URL Extension

This is a Chrome extension that allows for quick generation and preview of short links using Sink.

✨ Features

  • Instantly shorten the current webpage URL into a Sink short link.
  • Customizable short link suffix.
  • Preview shortened links with quick copy functionality.
  • Log in to your Sink account to manage generated short links.

☀️ Screenshots

  • Popup Page

popupPage

  • QRCode Page

QRCodePage

  • Setting Page

optionPage

  • Setting Page - Login

optionPage

🛠 Development and Debugging

  1. Clone the repository to your local machine
git clone https://github.com/zhuzhuyule/sink-extension.git
  1. Enter the project directory
cd sink-extension
  1. Install dependencies
pnpm install
  1. Start the development server
pnpm dev
# or
pnpm build
  1. Open Chrome browser and navigate to the Extensions page (chrome://extensions/).
  2. Enable Developer mode.
  3. Click the Load unpacked extension button.
  4. Select the root directory of the extension ./sink-tool.

📦 Manual Installation

You can install the extension using the following steps:

  1. Download the sink-tool.zip file.
  2. Extract the zip file.
  3. Open Chrome browser and navigate to the Extensions page (chrome://extensions/).
  4. Enable Developer mode.
  5. Click the Load unpacked extension button.
  6. Select the root directory of the extension sink-tool.

🚀 Usage

  1. Install Sink service: refer to https://github.com/ccbikai/Sink
  2. Install the extension into the Chrome browser.
  3. Navigate to the webpage you want to shorten.
  4. Click the extension icon, customize the short link suffix (optional).
  5. Click the generate button, preview, and copy the short link.

🛠️ Tech Stack

  • Preact: Lightweight UI library for building user interfaces.
  • TypeScript: Adds type checking for better readability and maintainability.
  • Vite: Fast development server and build tool.
  • Tailwind CSS: Utility-first CSS framework for building modern interfaces.
  • ESLint: Code style checker to ensure code quality.
  • Prettier: Code formatter to maintain consistent style.
  • Jest: JavaScript testing framework for unit and integration tests.
  • Chrome Extension Manifest Version 3: The latest version of Chrome Extension spec.

🤝 Contributing

Feel free to submit issues and pull requests!

📄 License

Distributed under the MIT License.