Skip to content

ayoung19/clipboard-history

Repository files navigation

Clipboard History - Securely access, track, and manage your clipboard history | Product Hunt

Clipboard History

The first open source clipboard manager Chrome extension. Get all of the productivity benefits of a clipboard history with none of the security risks.

Clipboard History offers a simple, efficient, and secure way to manage your clipboard. When the clipboard monitor is enabled, everything you copy to your clipboard will be backed up and saved locally for easy access later. Never worry about losing important content in your clipboard again!

Security & Privacy

Unrestricted access to your clipboard can raise serious privacy concerns. In an effort to be the most trustworthy clipboard history manager, Clipboard History is fully open-source. You can download or review the source code here: https://github.com/ayoung19/clipboard-history

Contributing

This is a Plasmo extension project bootstrapped with plasmo init.

Architecture Diagram

Below is a rudimentary architecture diagram showing the general flow of clipboard data between the different components of the extension.

Untitled-2024-10-02-0046

Project Structure

clipboard-history
├── assets
├── background
│   ├── messages
│   └── index.ts
├── popup
├── scripts
├── storage
├── types
├── utils
├── offscreen.html
└── offscreen.ts
Name Description
assets https://docs.plasmo.com/framework/assets
background/messages https://docs.plasmo.com/framework/messaging
background/index.ts https://docs.plasmo.com/framework/background-service-worker
popup https://docs.plasmo.com/framework/ext-pages#adding-a-popup-page
scripts Contains scripts used in the build system and CI/CD.
types Contains definitions and schemas of common types used in application logic.
utils Contains utility functions used in application logic.
offscreen.html https://developer.chrome.com/docs/extensions/reference/api/offscreen
offscreen.ts https://developer.chrome.com/docs/extensions/reference/api/offscreen

Getting Started

First, run the development server:

pnpm dev
# or
npm run dev

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: build/chrome-mv3-dev.

You can start editing the popup by modifying popup.tsx. It should auto-update as you make changes. To add an options page, simply add a options.tsx file to the root of the project, with a react component default exported. Likewise to add a content page, add a content.ts file to the root of the project, importing some module and do some logic, then reload the extension on your browser.

For further guidance, visit our Documentation

Making production build

Run the following:

pnpm build
# or
npm run build

This should create a production bundle for your extension, ready to be zipped and published to the stores.

Submit to the webstores

The easiest way to deploy your Plasmo extension is to use the built-in bpp GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow this setup instruction and you should be on your way for automated submission!

Contributors

ayoung19
Andy Young
morph1nX
Rhythm Aich
uussaammaahh
Usamah Ulde