screenshotmonitor.com Helper

This is a cross-platform browser extension/addon to help SSM users have a strategy and track targeted daily time.

Prerequisites

• Already installed Firefox or Chrome browser
• node + npm
• web-ext (Included as dependency of it's webpack extension)

Includes the following

• 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

Project Structure

/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.

Setup & Usage

Press "Use this template" button above and then clone the project on your local.

Installing dependencies:

npm install

Build in watch mode

For running Firefox with Manifest v2:

npm run watch

For running Chrome with Manifest v3:

npm run watch:c

Building for production

For Firefox with Manifest v2:

npm run build

For Chrome with Manifest v3:

npm run build:c

Cleaning & Testing

To clean dist folder:

npm run clean

To test:

npm run test

To further testing, you might want to have a look at mockzilla.

Deep diving

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 firefoxPreviewoption with'mv3' value on webpack config.

Contribution

If you ever think that something useful can be added, please do not hesitate to open a PR with a new branch.

In case you want to support me, or contact me

You can always text me via Twitter DM.