Discord-Monitor-Chrome-Extension

This Extension will monitor the discord opened inside chrome browser tab and you can monitor typing and posting message activities of any one user. Whenever selected user starts typing or posts a message it will send you a telegram notification

Technologies

Web

• ES2015
• Less CSS

Module bundler: Webpack

Plugins

• clean-webpack-plugin to clean the output directory before every build
• copy-webpack-plugin to copy static resources to the output directory
• extract-text-webpack-plugin to extract CSS stylesheets as a separate bundle to the output directory
• optimize-css-assets-webpack-plugin to optimize the extracted CSS
• html-webpack-plugin to inject entry-points into the startup html page to the output directory
• uglifyjs-webpack-plugin to minify JavaScript before bundling them to the output directory

Loaders

• html-loader to bundle html entry points
• style-loader to bundle CSS stylesheets
• css-loader to work with style-loader for bundling of CSS stylesheets
• less-loader to transpile Less CSS into regular CSS
• file-loader to work with other file types
• eslint-loader to run ESLint on JavaScript files
• babel-loader to perform babel transpilations with the help of supporting dependencies

Supporting dependencies

• babel-core, babel-preset-env to support babel-loader
• eslint, babel-eslint, eslint-config-myterminal, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y and eslint-plugin-react to support eslint-loader in running ESLint to lint JavaScript files
• less to help less-loader with transpilation of Less CSS into regular CSS
• effortless-css to provide Less CSS mixins
• webpack-merge to be able to use a common configuration across dev and prod
• webpack-dev-server to be able to live-reload the web-browser when run in live mode.

Commands

• npm run debug to run Webpack with development configuration.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run develop to run Webpack with development configuration and keep watching for file changes within source.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run live to run Webpack with development configuration and keep watching for file changes within source and reload the web-browser on every change.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser and provides a live-development experience.
• npm run build to run Webpack with production configuration.
  In this mode, Webpack minifies the JavaScript bundles and there are no source-maps created.