Marinerer/color-picker-extension

color-picker-extension

This boilerplate has Legacy version

Note

This project is listed in the Awesome Vite

Tip

Share storage state between all pages

2024-07-20.12.36.15.mov

Table of Contents

• Intro
• Features
• Structure
  • ChromeExtension
  • Packages
  • Pages
• Getting started
  • Chrome
  • Firefox
• Install dependency
  • For root
  • For module
• Community
• Reference
• Star History
• Contributors

Intro

This boilerplate is made for creating chrome extensions using React and Typescript.

The focus was on improving the build speed and development experience with Vite(Rollup) & Turborepo.

Features

• React18
• TypeScript
• Tailwindcss
• Vite
• Turborepo
• Prettier
• ESLint
• Chrome Extension 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 change eol(End of line) to the same as on Linux/Mac, without this, you will have conflicts with your teammates with those systems and our bash script won't work

2. Clone this repository.
3. Change extensionDescription and extensionName in messages.json file.
4. Install pnpm globally: npm install -g pnpm (check your node version >= 18.19.1))
5. Run pnpm install

And then, depending on needs:

For Chrome:

1. Run:
   • Dev: pnpm dev (On windows, you should run as administrator. (Issue#456)
   • Prod: pnpm build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder at root

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox
   • Prod: pnpm build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from dist folder at root

Remember in firefox you add plugin in temporary mode, that's mean it'll disappear after each browser close.

You have to do it on every browser launch.

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

Env Variables

1. Copy .example.env and past it as .env in the same path
2. Add a new record inside .env
3. Add this key with type for value to vite-env.d.ts (root) to ImportMetaEnv
4. Then you can use it with import.meta.env.{YOUR_KEY} like with standard Vite Env

If you want to set it for each package independently:

1. Create .env inside that package
2. Open related vite.config.mts and add envDir: '.' at the end of this config
3. Rest steps like above

Remember you can't use global and local at the same time for the same package(It will be overwritten)

Structure

ChromeExtension

Main app with background script, manifest

• manifest.js - manifest for chrome extension
• src/background - background script for chrome extension (background.service_worker in manifest.json)
• public/content.css - content css for user's page injection

Packages

Some shared packages

• dev-utils - utils for chrome extension development (manifest-parser, logger)
• i18n - custom i18n package for chrome extension. provide i18n function with type safety and other validation.
• hmr - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server
• shared - shared code for entire project. (types, constants, custom hooks, components, etc.)
• storage - helpers for storage easier integration with, e.g local, session storages
• tailwind-config - shared tailwind config for entire project
• tsconfig - shared tsconfig for entire project
• ui - here's a function to merge your tailwind config with global one, and you can save components here
• vite-config - shared vite config for entire project
• zipper - By pnpm zip you can pack dist folder into extension.zip inside newly created dist-zip
• e2e - By pnpm e2e you can run end to end tests of your zipped extension on different browsers

Pages

• content - content script for chrome extension (content_scripts in manifest.json)
• content-ui - content script for render UI in user's page (content_scripts in manifest.json)
• content-runtime - content runtime script this can be inject from popup like standard content
• devtools - devtools for chrome extension (devtools_page in manifest.json)
• devtools-panel - devtools panel for devtools
• new-tab - new tab for chrome extension (chrome_url_overrides.newtab in manifest.json)
• options - options for chrome extension (options_page in manifest.json)
• popup - popup for chrome extension (action.default_popup in manifest.json)
• side-panel - sidepanel(Chrome 114+) for chrome extension (side_panel.default_path in manifest.json)

Community

To chat with other community members, you can join the Discord server. You can ask questions on that server, and you can also help others.

Also, suggest new features or share any challenges you've faced while developing Chrome extensions!

Reference

• Vite Plugin
• ChromeExtension
• Rollup
• Turborepo
• Rollup-plugin-chrome-extension

Star History

Contributors

This Boilerplate is made possible thanks to all of its contributors.

---

Special Thanks To

---

Made by Jonghakseo