cross-browser boilerplate

Author: fxnoob

.github/FUNDING.yml

@@ -0,0 +1,8 @@
+# These are supported funding model platforms
+
+github: fxnoob
+patreon: fxnoob
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+custom: # Replace with a single custom sponsorship URL

.gitignore

@@ -4,3 +4,4 @@ babel
 [email protected]
 dist/
 out/
+dist.zip

README.md

@@ -1,36 +1,108 @@
-# A Chrome extension boilerplate.
+# A Browser(Chrome/Edge/Firefox/Brave) extension boilerplate.
+
+## Prerequisites
+
+- yarn v1.17.3
+- node v12.3.1
+
+## Pre-configurations
+
+> * Replace `Constants.appConfig.key` in `constants.js` with your chrome extension's key obtained from chrome developer extension dashboard.
+> * Set `GECKO_ID` in `constants.js` and Set other configurations in `constants.js` when required.
+> * Set extension next version in `package.json` version before building.
+> * Generate locale for key `appName` and `appDescription` for extension's name and description. See `yarn generate:locale`.
 
 ## Basic Usage
 
+### Locale generate/Delete
+
+Generate locale
+````
+yarn generate:locale
+````
+
+Delete locale
+````
+yarn delete:locale
+````
+
+### Build
+
+#### For Local Development
+
+#### For Chromium Development Build
+
+```
+yarn
+yarn dev:chromium
+```
+
+#### For Firefox Development Build
+
 ```
-    yarn
-    yarn dev // create development build
-    yarn build // create production build
+yarn
+yarn dev:firefox
 ```
 
+#### For Production Release
+
+> Note: Before creating production build. Set version in package.json's version. that will be extension's build version. 
+
+#### For Chromium Build
+
+```
+yarn
+yarn build:chromium
+```
+
+#### For Firefox Build
+
+```
+yarn
+yarn build:firefox
+```
+
+
+
 ## features:
 
-> 1. Support for ES7 ( with Babel and polyfill)
-> 2. popup page with reactjs and material ui framework
-> 3. Content script with reactjs and material ui framework
-> 4. Bundling (webpack)
+> 1. Support for ESNEXT ( with Babel and polyfill).
+> 2. Popup page with reactjs and material ui framework.
+> 3. Content script with reactjs and material ui framework.
+> 5. Option Page with reactjs and material ui framework + tailwind css.
+> 5. Bundling (webpack).
+> 6. Cross-browser configurations.
+> 7. Generate multiple-language (Auto-translations) locales from english locales. See `yarn generate:locale` and `yarn delete:locale`. 
+> 8. Some (useful) services e.g. DbService, messagePassing, chromeService and helper functions(helpers).
+> 9. Some (useful) react components e.g. FrameMUI.js (To mount react mui component in iframe in content script).
+> 10. Locale translation using unofficial google translate API (Free version).
 
 ## directory structure
 
 > - `src/` is root directory for a chrome extension. it includes `manifest.json` file and other static stuff.
 
 > - `src/background.js` is main background js file for the chrome extension.
 
+> - `src/components` is the directory which includes react js components.
+
 > - `src/popup-page` is the directory which includes react js setup for popup page.
 
-> - `src/content-scripts` is the directory directory which includes react js setup for content script.
+> - `src/option-page` is the directory which includes react js setup for option pages.
+
+> - `src/content-scripts` is the directory which includes react js setup for content script.
 
 > - `src/services` is the directory for services that can be written in es6,es7 or es8...
 
 ## How to extend ?
 
-> - Write chrome extension's background scripts code in `src/background.js`
+> - Write extension's background scripts code in `src/background.js`
+
+> - Write extension's react components in `src/components/` directory.
+
+> - Write extension's popup page codes in `src/popup-page/` directory.
+
+> - Write extension's option page codes in `src/option-page` directory.
 
-> - Write chrome extension's popup page codes in `src/popup-page` Reactjs directory system.
+> - Write extension's content scripts codes in `src/content-scripts` directory.
 
-> - Write chrome extension's content scripts codes in `src/content-scripts` Reactjs directory system.
+> - Write extension's services codes in `src/services` directory.

chromium.webpack.js

@@ -0,0 +1,7 @@
+const baseConfig = require("./webpack.config");
+module.exports = (env, options) => {
+  return baseConfig(env, {
+    ...options, // app specific configurations
+    browser: "chromium",
+  });
+};

constants.js

@@ -1,17 +1,40 @@
+const { generateGuid } = require("./src/services/guid");
 const constants = {
   appConfig: {
-    appName: "extension name",
+    appName: "EXTENSION_NAME",
+    urls: {
+      chrome:
+          "CHROME_STORE_URL",
+      firefox: "FIREFOX_STORE_URL",
+      edge:
+          "EDGE_STORE_URL",
+    },
+    // put extension key here if required which would only be used in development mode
     key:
-      "-----BEGIN PUBLIC KEY-----\n" +
-      "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA3VymTQvpTgWpVbYeveQV\n" +
-      "I2ZuyKZtHtzDqIWu4Og/ZjOEbu6eXPzvX57BmMv0sX79Y0EDRHkbQAgtWjgilCTE\n" +
-      "uWqxCOLpLpkYs9Dz/iXymqbIaM6IbLZEp513uKMSTknU9V5eWFuNeOU8Ps/6rr35\n" +
-      "chBpbVxeWawy5jLak03n5jFRCnOtkzoU9gkbbTQRykV2dfp+KP0UYn7Vox/17fCH\n" +
-      "CHPG5oA/DvH60iokIhoUXe+5SCIFcdsJE/a7gvH7YGbDkC6+ENpmUK0dEIEJSHAh\n" +
-      "vyLwCl4pmiIC/crpbLxlV5SPfAN+P3tiAUlS0M5U2f0Nf6AFayvazJslHKTarU3K\n" +
-      "qQIDAQAB\n" +
-      "-----END PUBLIC KEY-----\n"
-  }
+    // eslint-disable-next-line max-len
+        "-----BEGIN PUBLIC KEY-----\nMssIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhnjCHD79hDbWfqjnP9SW\nN0AXmXHh5eVk2D0oMILadmj/2uRQm/jNpnlvjVHY+899gdYRH/k7v4f+qF6gV3Yh\nwb/2PnW9PEo2VksgiixSesccvcwRXEJSngtxNWOARYSOTqTCCum9rjFVPZL+voh7\ndUsTN45D+RBLQORYbu5NtSM6RcGhUbYvhAosKwo+lsOAjM5niQDLJi//dZ9R32tc\n6tht4XrP59CTWBo8JCpIcHT6edN2HQ2vRiO5CHVb2jfT1hrO82WZ9LWsErzo/gCr\nXyIvnnXjg1wif7++WTi5mQl05Ohv3vKazNLeFpl/2XxvJ1xw4Pfh7m2qMaBJd7ll\n3QIDAQAB\n-----END PUBLIC KEY-----",
+  },
+  contentScript: {
+    mountId: generateGuid(),
+  },
+  browser: {
+    firefox: {
+      manifest: {
+        browser_specific_settings: {
+          gecko: {
+            id: "GECKO_ID",
+            strict_min_version: "42.0",
+          },
+        },
+      },
+    },
+  },
+  support: {
+    donate: "https://www.patreon.com/fxnoob",
+    howToVideoLink: "TUTORIAL_LINK",
+    uninstallFeedbackForm: "HTTPS://FEEDBACK_FORM_LINK",
+  },
 };
 
 module.exports = constants;
+

firefox.webpack.js

@@ -0,0 +1,7 @@
+const baseConfig = require("./webpack.config");
+module.exports = (env, options) => {
+  return baseConfig(env, {
+    ...options, // app specific configurations
+    browser: "firefox",
+  });
+};

package.json

@@ -1,25 +1,30 @@
 {
   "name": "chrome-extension-boilerplate",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "description": "",
   "main": "index.js",
   "homepage": "https://fxnoob.github.io/chrome-extension-boilerplate",
   "scripts": {
-    "build:css": "tailwindcss build src/styles/style.css -o dist/style.css",
-    "watch:css": "yarn build:css && chokidar 'src/styles/*.css' -c 'yarn build:css'",
-    "watch:js": "webpack --watch --config webpack.config.js --mode=development",
-    "build:js": "webpack  --config webpack.config.js --mode=production",
+    "build:tailwind": "tailwindcss build src/styles/style.css -o dist/style.css",
+    "watch:tailwind": "chokidar 'src/styles/*.css' -c 'yarn build:tailwind'",
+    "prestart": "yarn build:tailwind",
+    "prebuild": "yarn rm && yarn build:tailwind",
     "rm": "rm -rf dist/",
-    "start": "yarn dev",
-    "dev": "concurrently --kill-others 'yarn watch:css' 'yarn watch:js'",
-    "build": "yarn rm && concurrently 'yarn build:css' 'yarn build:js'",
+    "rm:zip": "rm dist.zip",
+    "dev:chromium": "yarn build:tailwind && webpack --watch --progress --colors --config chromium.webpack.js --mode=development",
+    "dev:firefox": "yarn build:tailwind && webpack --watch --progress --colors --config firefox.webpack.js --mode=development",
+    "build:chromium": "yarn build:tailwind && webpack --progress --colors --config chromium.webpack.js --mode=production",
+    "build:firefox": "yarn build:tailwind && webpack --progress --colors --config firefox.webpack.js --mode=production",
     "jsdoc": "jsdoc src -r",
     "deploy_jsdoc": "yarn jsdoc &&  gh-pages -d out",
-    "test": "yarn build"
+    "zip": "zip -r dist.zip dist/*",
+    "test": "yarn build:chromium && yarn build:firefox",
+    "generate:locale": "node scripts/generate-locale",
+    "delete:locale": "node scripts/delete-locale"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn build"
+      "pre-commit": "yarn test && yarn rm"
     }
   },
   "keywords": [],
@@ -51,23 +56,27 @@
     "husky": "^3.0.9",
     "image-webpack-loader": "^5.0.0",
     "jsdoc": "^3.6.3",
-    "prettier": "1.18.2",
+    "prettier": "^2.2.1",
     "pretty-quick": "^2.0.0",
     "react-hot-loader": "^4.12.10",
     "style-loader": "^1.2.1",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2"
+    "webpack-dev-server": "^3.7.2",
+    "node-google-translate-skidz": "^1.1.2",
+    "zx": "^1.0.2",
+    "tailwindcss": "^1.8.3",
+    "@tailwindcss/ui": "^0.5.0"
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
     "@babel/runtime": "^7.5.5",
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
-    "@tailwindcss/ui": "^0.5.0",
+    "jss": "^10.6.0",
+    "jss-rtl": "^0.3.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-frame-component": "^4.1.3",
-    "tailwindcss": "^1.8.3"
+    "react-frame-component": "5.0.0"
   }
 }

scripts/delete-locale

@@ -0,0 +1,4 @@
+#! /usr/bin/env node
+
+require = require('esm')(module);
+require('./deleteLocale').cli(process.argv);

scripts/deleteLocale.js

@@ -0,0 +1,83 @@
+/* eslint-disable no-console */
+import path from "path";
+import chalk from "chalk/source";
+import arg from "arg";
+import inquirer from "inquirer";
+import { deleteLocales } from "./delete_locales";
+const jsonfile = require("jsonfile");
+const mainLocaleJsonFile = path.join(__dirname, "./locale_en.json");
+const localeJson = jsonfile.readFileSync(mainLocaleJsonFile);
+
+function parseArgsIntoOptions(rawArgs) {
+  const args = arg(
+    {
+      "--key": String,
+      "--del": Boolean,
+    },
+    {
+      argv: rawArgs.slice(2),
+    }
+  );
+  return {
+    key: args["--key"] || null,
+    del: args["--del"] || null,
+  };
+}
+function isNull(val) {
+  return val == null;
+}
+async function promptForMissingOptions(options) {
+  const validateInput = (propName) => (value) => {
+    if (value == "") return `${propName} can't be Empty!`;
+    else if (propName == "key") {
+      if (!localeJson.hasOwnProperty(value)) {
+        return "key does not exist!";
+      } else {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  };
+  const questions = [];
+  if (isNull(options.key)) {
+    questions.push({
+      type: "input",
+      validate: validateInput("key"),
+      name: "key",
+      message: "type key name:",
+    });
+  }
+  if (isNull(options.delete)) {
+    questions.push({
+      type: "confirm",
+      name: "del",
+      default: false,
+      message: "do you really want to delete this locale?",
+    });
+  }
+  const answers = await inquirer.prompt(questions);
+  return {
+    ...options,
+    key: options.key || answers.key,
+    del: options.del || answers.del,
+  };
+}
+async function updatelocales(options) {
+  const { key } = options;
+  /* delete key and update main en locale file */
+  delete localeJson[key];
+  jsonfile.writeFileSync(mainLocaleJsonFile, localeJson, {
+    flag: "w",
+  });
+  /* update other locale files */
+  deleteLocales([{ key: key }]);
+}
+export async function cli(args) {
+  let options = parseArgsIntoOptions(args);
+  options = await promptForMissingOptions(options);
+  if (!options.del) return;
+  // delete the key value from the json file and then update all locales
+  await updatelocales(options);
+  console.log(chalk.cyan(`locale key ${options.key} has been deleted!`));
+}

scripts/delete_locales.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+const jsonfile = require("jsonfile");
+const path = require("path");
+const { locales } = require("./translate");
+/**
+ *
+ * takes updated locale_en.json
+ * delete provided locale keys from ../src/app/_locales/${locale}/messages.json
+ *
+ * */
+function deleteLocales(keys) {
+  const targetDirRoot = path.join(__dirname, "../src/app/_locales");
+  for (let i = 0; i < locales.length; i++) {
+    const locale = locales[i];
+    const oldJsonFilePath = path.join(
+      targetDirRoot,
+      `/${locale}/messages.json`
+    );
+    const oldJsonFile = jsonfile.readFileSync(oldJsonFilePath);
+    for (let j = 0; j < keys.length; j++) {
+      if (oldJsonFile[keys[j].key]) {
+        delete oldJsonFile[keys[j].key];
+        console.log("deleting key ->", keys[j].key);
+      }
+    }
+    jsonfile.writeFileSync(oldJsonFilePath, oldJsonFile, { flag: "w" });
+  }
+}
+export { deleteLocales };