This is a cross-platform browser extension/addon to help SSM users have a strategy and track targeted daily time.
- Already installed Firefox or Chrome browser
- node + npm
- web-ext (Included as dependency of it's webpack extension)
- TypeScript
- Webpack
- React
- Jest
- Example Code Includes:
- background.js
- Options page
- Content script
- Pop-up
- Storage API
- Tabs API
- WebExtension browser API Polyfill
- web-ext & Its WebPack Plugin
/react-ts-starter-for-extensions
├── dist
│ ├── js # Generated code bundles
│ └── ...
├── public
│ └── ... # Static files
├── src
│ ├── __tests__ # Jest tests folder
│ ├── types # TS Types folder
│ ├── utils # Utility codes folder
│ ├── background.ts # Extension's background file
│ ├── content_script.ts # The script will be injected to the page
│ ├── options.ts # Extension's settings page
│ └── popup.ts # Extension's pop-up page
├── webpack
│ ├── webpack.common.js # Common tasks
│ ├── webpack.dev.js # Dev related tasks
│ └── webpack.prod.js # Prod related tasks
...
Feel free to remove the parts that you do not need and then edit the webpack config files.
Press "Use this template" button above and then clone the project on your local.
npm install
npm run watch
npm run watch:c
npm run build
npm run build:c
npm run clean
npm run test
To further testing, you might want to have a look at mockzilla.
You might want to check out web-ext
CLI documentation in order to experience
further settings. You can run the extension with any version of browsers,
or passing different folder setups. You can even test Manifest V3 on Firefox by
passing firefoxPreview
option with'mv3'
value on webpack config.
If you ever think that something useful can be added, please do not hesitate to open a PR with a new branch.
You can always text me via Twitter DM.