Widget Chrome Extension

welcome custom new tab!

product: chorestore

Table of Contents

• Preview
  • Main
  • Widget
    • Add Widget
    • Add Clock Widget
    • Edit
  • Setting
    • Dark Mode
    • I18n
• Development
  • Stack
  • Dev
    • Dependency
    • Development Setup
      • Dev Script
      • Lint, Prettier, Tsc Scripts
      • Prettier Only Check Scripts
      • Run All Lint Scripts
      • Test
        • Test: Watch
        • Test: Coverage
      • Build
        • Build with Mode
  • Publish

Preview

• create custom widget
  • history
  • clock
  • google search and mail
• manage user bookmarks
• setting dark mode, i18n(ko, en)

Main

Add Widget

Add Clock Widget

Edit

Setting

Dark Mode

I18n

Development

Stack

• yarn 4.2.2
• React
• Vite
• TypeScript
• Emotion
• shadcn/ui
• eslint
• prettier
• manifest-v3
• chrome API

Development Setup

Dependency

yarn install

dev script

yarn dev

• newtab: http://localhost:5173
• popup: http://localhost:5173/popup.html

lint, prettier, tsc scripts

yarn lint
yarn format
yarn tsc

prettier only check scripts

yarn format:check

run all lint scripts (eslint, prettier, tsc)

yarn check

test

yarn test

test: watch

yarn test:watch

test: coverage

yarn test:coverage

build

yarn build

build with mode (lint, prettier, tsc)

yarn build:prod

yarn build:stage

product publish

yarn build:prod

1. open chrome://extensions/
2. 압축해제된 확장 프로그램을 로드합니다 클릭
3. dist 폴더 선택