Introduce Webpack

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist
+dev
+temp

config.json

@@ -0,0 +1,9 @@
+{
+  "chromePath": "src",
+  "operaPath": "src",
+  "firefoxPath": "src",
+  "devDirectory": "dev",
+  "distDirectory": "dist",
+  "tempDirectory": "temp",
+  "extName": "simple-translate"
+}

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "simple-translate",
+  "version": "0.0.0",
+  "dependencies": {
+    "browser-info": "^1.2.0",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.49",
+    "@babel/preset-env": "^7.0.0-beta.49",
+    "@babel/preset-react": "^7.0.0-beta.49",
+    "babel-loader": "^8.0.0-beta.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.11",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.9.0",
+    "react-svg-loader": "^2.1.0",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webextension-polyfill": "^0.3.1",
+    "webpack": "^4.10.2",
+    "webpack-cli": "^3.0.1",
+    "zip-webpack-plugin": "^3.0.0"
+  },
+  "scripts": {
+    "watch-dev": "webpack --config webpack.config.dev.js --watch",
+    "build": "webpack --config webpack.config.dist.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sienori/simple-translate.git"
+  },
+  "author": "Sienori",
+  "license": "MPL-2.0",
+  "description": "A simple and powerful WebExtensions for translating pages and text.",
+  "bugs": {
+    "url": "https://github.com/sienori/simple-translate/issues"
+  },
+  "homepage": "https://github.com/sienori/simple-translate#readme",
+  "main": ".src/manifest.json",
+  "keywords": [
+    "webextensions",
+    "firefox",
+    "chrome"
+  ]
+}

src/manifest-chrome.json

@@ -0,0 +1,50 @@
+{
+  "manifest_version": 2,
+  "version": "1.9.1",
+
+  "name": "__MSG_extName__",
+  "description": "__MSG_extDescription__",
+  "default_locale": "en",
+
+  "permissions": ["<all_urls>", "storage", "contextMenus"],
+
+  "options_ui": {
+    "page": "options/index.html",
+    "open_in_tab": true
+  },
+
+  "icons": {
+    "512": "icons/512.png",
+    "128": "icons/128.png",
+    "64": "icons/64.png",
+    "48": "icons/48.png",
+    "32": "icons/32.png"
+  },
+
+  "background": {
+    "scripts": ["background/background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "512": "icons/512.png",
+      "128": "icons/128.png",
+      "64": "icons/64.png",
+      "48": "icons/48.png",
+      "38": "icons/38.png",
+      "32": "icons/32.png",
+      "19": "icons/19.png",
+      "16": "icons/16.png"
+    },
+    "default_popup": "popup/index.html"
+  },
+
+  "content_scripts": [
+    {
+      "all_frames": true,
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "css": ["content/simple-translate.css"],
+      "js": ["content/simple-translate.js"]
+    }
+  ]
+}

simple-translate/manifest.json → src/manifest-firefox.json

@@ -1,56 +1,56 @@
-{
-  "manifest_version": 2,
-  "version": "1.9.1",
-
-  "name": "__MSG_extName__",
-  "description": "__MSG_extDescription__",
-  "default_locale": "en",
-
-  "applications": {
-    "gecko": {
-      "id": "simple-translate@sienori"
-    }
-  },
-
-  "permissions": ["<all_urls>", "storage", "contextMenus"],
-
-  "options_ui": {
-    "page": "options/options.html",
-    "open_in_tab": true
-  },
-
-  "icons": {
-    "512": "icons/512.png",
-    "128": "icons/128.png",
-    "64": "icons/64.png",
-    "48": "icons/48.png",
-    "32": "icons/32.png"
-  },
-
-  "background": {
-    "scripts": ["Settings.js", "background.js"]
-  },
-
-  "browser_action": {
-    "default_icon": {
-      "512": "icons/512.png",
-      "128": "icons/128.png",
-      "64": "icons/64.png",
-      "48": "icons/48.png",
-      "38": "icons/38.png",
-      "32": "icons/32.png",
-      "19": "icons/19.png",
-      "16": "icons/16.png"
-    },
-    "default_popup": "popup/popup.html"
-  },
-
-  "content_scripts": [
-    {
-      "all_frames": true,
-      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-      "css": ["simple-translate.css"],
-      "js": ["Settings.js", "translate.js", "simple-translate.js"]
-    }
-  ]
-}
+{
+  "manifest_version": 2,
+  "version": "1.9.1",
+
+  "name": "__MSG_extName__",
+  "description": "__MSG_extDescription__",
+  "default_locale": "en",
+
+  "applications": {
+    "gecko": {
+      "id": "simple-translate@sienori"
+    }
+  },
+
+  "permissions": ["<all_urls>", "storage", "contextMenus"],
+
+  "options_ui": {
+    "page": "options/index.html",
+    "open_in_tab": true
+  },
+
+  "icons": {
+    "512": "icons/512.png",
+    "128": "icons/128.png",
+    "64": "icons/64.png",
+    "48": "icons/48.png",
+    "32": "icons/32.png"
+  },
+
+  "background": {
+    "scripts": ["background/background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "512": "icons/512.png",
+      "128": "icons/128.png",
+      "64": "icons/64.png",
+      "48": "icons/48.png",
+      "38": "icons/38.png",
+      "32": "icons/32.png",
+      "19": "icons/19.png",
+      "16": "icons/16.png"
+    },
+    "default_popup": "popup/index.html"
+  },
+
+  "content_scripts": [
+    {
+      "all_frames": true,
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "css": ["content/simple-translate.css"],
+      "js": ["content/simple-translate.js"]
+    }
+  ]
+}

webpack.config.dev.js

@@ -0,0 +1,108 @@
+/* Copyright (c) 2018 Kamil Mikosz 
+ * Released under the MIT license.
+ * see https://opensource.org/licenses/MIT */
+
+const {
+  getHTMLPlugins,
+  getOutput,
+  getCopyPlugins,
+  getFirefoxCopyPlugins,
+  getEntry
+} = require("./webpack.utils");
+const path = require("path");
+const config = require("./config.json");
+
+const generalConfig = {
+  mode: "development",
+  devtool: "source-map",
+  resolve: {
+    alias: {
+      src: path.resolve(__dirname, "src/")
+    }
+  },
+  module: {
+    rules: [
+      {
+        loader: "babel-loader",
+        exclude: /node_modules/,
+        test: /\.(js|jsx)$/,
+        query: {
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: {
+                  firefox: 57
+                }
+              }
+            ],
+            "@babel/preset-react"
+          ],
+          plugins: ["transform-class-properties"]
+        },
+        resolve: {
+          extensions: [".js", ".jsx"]
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader"
+          },
+          {
+            loader: "sass-loader"
+          }
+        ]
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          "babel-loader",
+          {
+            loader: "react-svg-loader",
+            options: {
+              svgo: {
+                plugins: [{ removeTitle: false }],
+                floatPrecision: 2
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+module.exports = [
+  {
+    ...generalConfig,
+    entry: getEntry(config.chromePath),
+    output: getOutput("chrome", config.devDirectory),
+    plugins: [
+      ...getHTMLPlugins("chrome", config.devDirectory, config.chromePath),
+      ...getCopyPlugins("chrome", config.devDirectory, config.chromePath)
+    ]
+  },
+  {
+    ...generalConfig,
+    entry: getEntry(config.operaPath),
+    output: getOutput("opera", config.devDirectory),
+    plugins: [
+      ...getHTMLPlugins("opera", config.devDirectory, config.operaPath),
+      ...getCopyPlugins("opera", config.devDirectory, config.operaPath)
+    ]
+  },
+  {
+    ...generalConfig,
+    entry: getEntry(config.firefoxPath),
+    output: getOutput("firefox", config.devDirectory),
+    plugins: [
+      ...getFirefoxCopyPlugins("firefox", config.devDirectory, config.firefoxPath),
+      ...getHTMLPlugins("firefox", config.devDirectory, config.firefoxPath)
+    ]
+  }
+];