refactor (#14)

.gitignore

@@ -62,4 +62,6 @@ typings/
 .next
 
 # Build directory
-build
+build
+TemplateElmChromeExtension/
+TemplateElmChromeExtension.zip

README.md

@@ -50,3 +50,4 @@ A template to create Google Chrome Extensions with Elm and Webpack as the module
   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.
+- `npm run prod` to run Webpack with production configuration and produce a zipped output folder

package.json

@@ -1,16 +1,17 @@
 {
   "name": "template-elm-chrome-extension",
-  "version": "0.0.1",
-  "description": "template-elm-chrome-extension",
-  "main": "build/index.html",
+  "version": "1.0.0",
+  "description": "A template repository for building a chrome extension with webpack and elm.",
+  "main": "TemplateElmChromeExtension/app.html",
   "scripts": {
     "debug": "webpack --config webpack.dev.js",
     "dev": "webpack --config webpack.dev.js --watch",
     "live": "webpack-dev-server --config webpack.live.js --open --hot --colors",
     "build": "webpack --config webpack.prod.js",
     "start": "npm run live",
     "restart": "rm -rf elm-stuff && npm start",
-    "test": "elm-test"
+    "test": "elm-test",
+    "prod": "npm run build && zip -r ./TemplateElmChromeExtension.zip ./TemplateElmChromeExtension"
   },
   "repository": {
     "type": "git",
@@ -28,11 +29,18 @@
   ],
   "author": "Tyler Lentz",
   "license": "BSD-3-Clause",
-  "dependencies": {},
+  "dependencies": {
+    "chrome-extension-async": "^3.4.1"
+  },
   "devDependencies": {
-    "babel-core": "6.26.3",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-private-methods": "^7.12.1",
+    "@babel/plugin-transform-classes": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "axios": "^0.21.1",
     "babel-eslint": "10.0.1",
-    "babel-loader": "7.1.4",
+    "babel-loader": "^8.2.2",
     "babel-preset-env": "1.7.0",
     "clean-webpack-plugin": "1.0.1",
     "copy-webpack-plugin": "4.6.0",
@@ -50,11 +58,11 @@
     "file-loader": "3.0.1",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
+    "jquery": "^3.5.1",
     "less": "3.9.0",
     "less-loader": "4.1.0",
     "mini-css-extract-plugin": "^0.8.0",
-    "moment": "^2.24.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",

src/scripts/app.js → src/js/app/app.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import "../styles/styles.scss";
+import "../../styles/styles.scss";
 
-const { Elm } = require("../elm/Main");
+const { Elm } = require("../../elm/Main");
 var app = Elm.Main.init({ node: document.querySelector("elm-simple") });

src/js/background.js

@@ -0,0 +1,2 @@
+// background goes here
+console.log("hi from background.js");

src/js/content-script.js

@@ -0,0 +1,2 @@
+// content-script goes here
+console.log("hi from content-script.js");

src/manifest.json

@@ -10,12 +10,22 @@
     "128": "icons/icon128.png"
   },
   "browser_action": {
-    "default_popup": "index.html"
+    "default_title": "Template Elm Chrome Extension",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    },
+    "default_popup": "app.html"
   },
   "background": {
-    "scripts": ["scripts/background.js"],
+    "scripts": [
+      "background.js"
+    ],
     "persistent": true
   },
   "author": "Tyler Lentz",
-  "permissions": ["activeTab"]
-}
+  "permissions": [
+    "activeTab"
+  ]
+}

webpack.common.js

@@ -1,43 +1,21 @@
 /* global require module __dirname */
 
 const packageDetails = require("./package.json");
-const sourceDir = "src";
-const outputDir = "build";
 const path = require("path");
-const webpack = require("webpack");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-// to extract the css as a separate file
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-// Minify elm code
-const ElmMinify = require("elm-minify");
 
-const clean = new CleanWebpackPlugin([outputDir]);
-const copy = new CopyWebpackPlugin([
-  {
-    from: `${sourceDir}/manifest.json`,
-    transform: (content, path) =>
-      content
-        .toString()
-        .replace(/#version#/g, packageDetails.version)
-        .replace(/#description#/g, packageDetails.description)
-  },
-  {
-    from: `${sourceDir}/icons`,
-    to: "icons"
-  }
-]);
-const html = new HtmlWebpackPlugin({
-  template: `${sourceDir}/index.html`
-});
+const sourceDir = "src";
+const outputDir = "TemplateElmChromeExtension";
 
 module.exports = {
+  context: __dirname,
   mode: "development",
   entry: {
-    app: `./${sourceDir}/scripts/app.js`,
-    background: `./${sourceDir}/scripts/background.js`
+    app: `./${sourceDir}/js/app/app.js`,
+    background: `./${sourceDir}/js/background.js`,
+    'content-script': `./${sourceDir}/js/content-script.js`
   },
   module: {
     rules: [
@@ -46,7 +24,7 @@ module.exports = {
         use: {
           loader: "file-loader",
           options: {
-            name: "fonts/[name].[ext]",
+            name: "assets/fonts/[name].[ext]",
             publicPath: "../"
           }
         }
@@ -56,7 +34,7 @@ module.exports = {
         use: {
           loader: "file-loader",
           options: {
-            name: "images/[name].[ext]",
+            name: "assets/images/[name].[ext]",
             publicPath: "../"
           }
         }
@@ -74,21 +52,48 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
-        loader: "babel-loader"
+        loader: "babel-loader",
+        options: {
+          plugins: [
+            "@babel/plugin-proposal-class-properties",
+            "@babel/plugin-proposal-private-methods"
+          ]
+        }
       },
       {
         test: /.html$/,
         loader: "html-loader"
       }
     ]
   },
-  plugins: [clean, copy, html],
+  plugins: [
+    new CleanWebpackPlugin([outputDir]),
+    new CopyWebpackPlugin([
+      {
+        from: `${sourceDir}/manifest.json`,
+        transform: (content, path) =>
+          content
+            .toString()
+            .replace(/#version#/g, packageDetails.version)
+            .replace(/#description#/g, packageDetails.description)
+      },
+      {
+        from: `${sourceDir}/assets/icons`,
+        to: "icons"
+      }
+    ]),
+    new HtmlWebpackPlugin({
+      template: `${sourceDir}/js/app/app.html`,
+      filename: "app.html",
+      chunks: ['app'],
+    }),
+  ],
   resolve: {
     modules: ["node_modules"],
     extensions: [".js", ".elm", ".scss", ".png"]
   },
   output: {
-    filename: "scripts/[name].js",
+    filename: "[name].js",
     path: path.resolve(__dirname, outputDir),
     publicPath: ""
   }

webpack.dev.js

@@ -4,21 +4,20 @@ const webpack = require("webpack");
 const WebpackMerge = require("webpack-merge");
 const commonConfig = require("./webpack.common.js");
 const ChromeExtensionReloader = require("webpack-chrome-extension-reloader");
-const chromeExtensionReloader = new ChromeExtensionReloader({
-  reloadPage: true, // Force the reload of the page also
-  entries: {
-    // The entries used for the content/background scripts
-    contentScript: "app", // Use the entry names, not the file name or the path
-    background: "background" // *REQUIRED
-  }
-});
 
 module.exports = WebpackMerge(commonConfig, {
   devtool: "inline-source-map",
   plugins: [
     new webpack.NamedModulesPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
-    chromeExtensionReloader
+    new ChromeExtensionReloader({
+      reloadPage: true, // Force the reload of the page also
+      entries: {
+        // The entries used for the content/background scripts
+        contentScript: "content-script", // Use the entry names, not the file name or the path
+        background: "background" // *REQUIRED
+      }
+    })
   ],
   module: {
     rules: [

webpack.live.js

@@ -8,10 +8,7 @@ const commonConfig = require("./webpack.common.js");
 
 module.exports = WebpackMerge(commonConfig, {
   devtool: "inline-source-map",
-  plugins: [
-    new webpack.NamedModulesPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ],
+  plugins: [new webpack.NamedModulesPlugin(), new webpack.NoEmitOnErrorsPlugin()],
   module: {
     rules: [
       {

webpack.prod.js

@@ -2,19 +2,16 @@
 
 const webpack = require("webpack");
 const WebpackMerge = require("webpack-merge");
-const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
 const commonConfig = require("./webpack.common.js");
-
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const ElmMinify = require("elm-minify");
 const optimizeCSS = new OptimizeCssAssetsPlugin();
-const miniCSS = new MiniCssExtractPlugin({
-  filename: "[name]-[hash].css"
-});
 const elmMinify = new ElmMinify.WebpackPlugin();
-const uglifyjs = new UglifyJSPlugin();
 
 module.exports = WebpackMerge(commonConfig, {
   mode: "production",
-  plugins: [elmMinify, miniCSS, optimizeCSS, uglifyjs],
+  plugins: [elmMinify],
   module: {
     rules: [
       {
@@ -23,24 +20,10 @@ module.exports = WebpackMerge(commonConfig, {
         use: {
           loader: "elm-webpack-loader",
           options: {
-            optimize: true
-          }
-        }
+            optimize: true,
+          },
+        },
       },
-      {
-        test: /\.css$/,
-        exclude: [/elm-stuff/, /node_modules/],
-        loaders: [MiniCssExtractPlugin.loader, "css-loader?url=false"]
-      },
-      {
-        test: /\.scss$/,
-        exclude: [/elm-stuff/, /node_modules/],
-        loaders: [
-          MiniCssExtractPlugin.loader,
-          "css-loader?url=false",
-          "sass-loader"
-        ]
-      }
-    ]
-  }
+    ],
+  },
 });