bjc1102 / clip-planet-extension

chrome extension

Clip-planet-extension

Summary

• api key를 통해 유저 정보 식별
• Chrome extension API를 활용하여 현재 chrome tab의 사이트 정보 추출
• 사이트 meta 데이터를 통한 사이트 정보 저장

Description

방문한 블로그들을 조금 더 간단하게 추가하고 자주 방문할 수 있도록 관리하는 서비스를 개발해보고자 생각했습니다. Notion Web Clipper, 크롬의 북마크와 같이 웹사이트 정보를 저장, 관리할 수 있도록 하는 프로젝트의 크롬 확장도구입니다.

사용 이미지

Chrome Extension TypeScript Starter를 활용하였습니다.

Boilerplate

Chrome Extension, TypeScript and React

Tech Stack

Boilerplate: chrome-extension-typescript-starter with React
CSS: SCSS
Bundling tool: Webpack

Project Structure

• src/typescript: TypeScript source files
• src/assets: static files
• dist: Chrome Extension directory
• dist/js: Generated JavaScript files

Setup

npm install

Build

npm run build

Build in watch mode

terminal

npm run watch

Visual Studio Code

Run watch mode.

type Ctrl + Shift + B

Load extension to chrome

Load dist directory

Test

npx jest or npm run test