A Chrome extension to copy your Mosaic timetable to Google Calendar
MIT License
This boilerplate has Legacy version
[!NOTE] This project is listed in the Awesome Vite
[!TIP] Share storage state between all pages
https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c
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.
extensionDescription
and extensionName
in messages.json
file.npm install -g pnpm
(check your node version >= 18.12.0)pnpm install
pnpm dev
pnpm build
chrome://extensions
Developer mode
Load unpacked extension
dist
folder at rootpnpm dev:firefox
pnpm build:firefox
about:debugging#/runtime/this-firefox
Load Temporary Add-on...
manifest.json
from dist
folder at rootMain app with background script, manifest
manifest.js
- manifest for chrome extensionlib/background
- background script for chromebackground.service_worker
inpublic/content.css
- content css for user's page injectionSome 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-servershared
- shared code for entire project. (types, constants, custom hooks, components, etc.)storage
- helpers for storage easier integration with, e.g local, session storagestailwind-config
- shared tailwind config for entire projecttsconfig
- shared tsconfig for entire projectui
- here's a function to merge your tailwind config with global one, and you can save components herevite-config
- shared vite config for entire projectzipper
- By pnpm zip
you can pack dist
folder into extension.zip
inside newly created dist-zip
content
- content script for chromecontent_scripts
in manifest.json)content-ui
- content script for render UI incontent_scripts
in manifest.json)content-runtime
- content runtime scriptpopup
like standard content
devtools
- devtools for chromedevtools_page
in manifest.json)devtools-panel
- devtools panel for devtools
new-tab
- new tab for chromechrome_url_overrides.newtab
in manifest.json)options
- options for chrome extension (options_page
popup
- popup for chromeaction.default_popup
inside-panel
- sidepanel(Chrome 114+) for chromeside_panel.default_path
in manifest.json)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!
This Boilerplate is made possible thanks to all of its contributors.
Made by Jonghakseo