🪷 ZenCycle

Table of Contents

• Intro
• Features
• Tech Stacks
• Getting started
  • Chrome
• Install dependency
  • For root
  • For module
• Troubleshooting
• Reference

Intro

🪷 ZenCycle is a Chrome extension designed to help you regain focus and boost productivity by incorporating the Pomodoro technique with website-blocking feature. With customizable focus and break durations, this extension empowers you to manage distractions and stay on track with your tasks.

Features

🪷 Customizable focus duration, break duration, and list of blocked websites and countdown timer

🪷 Dark mode and light mode

🪷 Focus mode with website-blocking feature

🪷 Push notification with sound after each focus and break

Tech Stacks

• React18
• TypeScript
• Tailwindcss
• Vite with Rollup
• Turborepo
• Prettier
• ESLint
• Chrome Extensions Manifest Version 3
• Custom i18n package
• Custom HMR (Hot Module Rebuild) plugin
• End-to-end testing with WebdriverIO

Getting started

1. When you're using Windows run this:

   • git config --global core.eol lf
   • git config --global core.autocrlf input

   This will set the EOL (End of line) character to be the same as on Linux/macOS. Without this, our bash script won't work, and you will have conflicts with developers on Linux/macOS.

2. Clone this repository.

3. Edit /packages/i18n/locales/{your locale(s)}/messages.json

4. In the objects extensionDescription and extensionName, change the message fields (leave description alone)

5. In /.package.json, change the version to the desired version of your extension.

6. Install pnpm globally: npm install -g pnpm (check your node version >= 18.19.1)

7. Run pnpm install

Then, depending on the target browser:

For Chrome:

1. Run: nvm install stable && nvm use stable
   • Dev: pnpm dev (on Windows, you should run as administrator; see issue#456)
   • Prod: pnpm build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Click - Load unpacked in the upper left corner
5. Select the dist directory from the boilerplate project

Install dependency for turborepo:

For root:

1. Run pnpm i <package> -w

For module:

1. Run pnpm i <package> -F <module name>

package - Name of the package you want to install e.g. nodemon
module-name - You can find it inside each package.json under the key name, e.g. @extension/content-script, you can use only content-script without @extension/ prefix

Troubleshooting

Hot module reload seems to have frozen

If saving source files doesn't cause the extension HMR code to trigger a reload of the browser page, try this:

1. Ctrl+C the development server and restart it (pnpm run dev)
2. If you get a grpc error, kill the turbo process and run pnpm dev again.

Reference

• Chrome Extensions
• Chrome Extension Boilerplate