https://github.com/salihsaygi/mantra
Self-control using mantra technique for productivity.
https://github.com/salihsaygi/mantra
editorjs extension google-chrome-extension manifest-v3 mantra productivity reactjs typescript
Last synced: about 2 months ago
JSON representation
Self-control using mantra technique for productivity.
- Host: GitHub
- URL: https://github.com/salihsaygi/mantra
- Owner: SalihSaygi
- Created: 2022-09-12T03:27:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-25T17:26:05.000Z (over 3 years ago)
- Last Synced: 2025-03-30T17:13:08.757Z (about 1 year ago)
- Topics: editorjs, extension, google-chrome-extension, manifest-v3, mantra, productivity, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 162 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Chrome Extension Boilerplate
## Getting Started
1. `npm i` to install dependancies
2. `npm start` to start running the fast development mode Webpack build process that bundle files into the `dist` folder
3. `npm i --save-dev ` to install new packages
## Loading The Chrome Extension
1. Open Chrome and navigate to `chrome://extensions/`
2. Toggle on `Developer mode` in the top right corner
3. Click `Load unpacked`
4. Select the entire `dist` folder
# Important Initial Steps
1. `git init` to start a new git repo for tracking your changes, do an initial base commit with all the default files
2. Update `package.json`, important fields include `author`, `version`, `name` and `description`
3. Update `manifest.json`, important fields include `version`, `name` and `description`
4. Update `webpack.commmon.js`, the title in the `getHtmlPlugins` function should be your extension name
# Production Build
1. `npm run build` to generate a minimized production build in the `dist` folder
2. ZIP the entire `dist` folder (e.g. `dist.zip`)
3. Publish the ZIP file on the Chrome Web Store Developer Dashboard!
## Important Default Boilerplate Notes
- Folders get flattened, static references to images from HTML do not need to be relative (i.e. `icon.png` instead of `../static/icon.png`)
- Importing local ts/tsx/css files should be relative, since Webpack will build a dependancy graph using these paths
- Update the manifest file as per usual for chrome related permissions, references to files in here should also be flattened and not be relative