browser extension for style copy.
Find a file
2025-02-03 02:17:10 +09:00
public initial commit 2025-02-03 02:17:10 +09:00
src initial commit 2025-02-03 02:17:10 +09:00
.gitignore initial commit 2025-02-03 02:17:10 +09:00
LICENSE initial commit 2025-02-03 02:17:10 +09:00
package.json initial commit 2025-02-03 02:17:10 +09:00
pnpm-lock.yaml initial commit 2025-02-03 02:17:10 +09:00
README.md initial commit 2025-02-03 02:17:10 +09:00
tsconfig.json initial commit 2025-02-03 02:17:10 +09:00
tsconfig.node.json initial commit 2025-02-03 02:17:10 +09:00
vite.config.ts initial commit 2025-02-03 02:17:10 +09:00

Style Copy Browser Extension

This is a browser extension that allows you to copy the styles of any element on a webpage and paste them into your own CSS.

This is a work in progress and is not yet available for download.

How to use

Open dev tools and click on an element. Sidebar will open with the styles of the element. Click on the copy button to copy the styles.

Motivation

I wanted to create a tool that would allow me to easily copy the styles of an element on a webpage and paste them into my own CSS. other tools 'divMagic' and 'CSS Peeper' are great but they are not open source and I wanted to create something that was open source and free to use.

Tech Stack

  • React
  • TypeScript
  • WebExtensions API
  • Vite

Development

  1. Clone the repository
  2. Run pnpm install
  3. Run pnpm run dev to start the development server
  4. browser will open with the extension installed