Merge pull request #385 from privacy-tech-lab/issue-380

webpack.config converted to ECMAScript (issue #380)

package.json

@@ -3,6 +3,7 @@
   "version": "2.0.1",
   "description": "A privacy extension that allows users to exercise rights under GPC",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "prestart": "rimraf dev",
     "start": "concurrently -k npm:start:firefox  npm:start:chrome",

src/background/analysis/analysis.js

@@ -42,10 +42,10 @@ import {
   uspPhrasing,
   uspCookiePhrasingList,
   doNotSellPhrasing,
-} from "../../data/regex";
+} from "../../data/regex.js";
 import psl from "psl";
 import { IS_BROWSER } from "../../theme/darkmode.js";
-import { headers } from "../../data/headers";
+import { headers } from "../../data/headers.js";
 
 /******************************************************************************/
 /******************************************************************************/

src/background/control.js

@@ -25,13 +25,13 @@ import {
 import { defaultSettings } from "../data/defaultSettings.js";
 import { modes } from "../data/modes.js";
 import { stores, storage } from "./storage.js";
-import { reloadDynamicRules } from "../common/editRules";
+import { reloadDynamicRules } from "../common/editRules.js";
 
 // TODO: Remove
 import {
   debug_domainlist_and_dynamicrules,
   updateRemovalScript,
-} from "../common/editDomainlist";
+} from "../common/editDomainlist.js";
 
 async function enable() {
   let mode = await storage.get(stores.settings, "MODE");

src/background/protection/protection-ff.js

@@ -19,7 +19,7 @@ import { initIAB } from "../cookiesIAB.js";
 import { initCookiesPerDomain } from "./cookiesOnInstall.js";
 import { initCookiesOnInstall } from "./cookiesOnInstall.js";
 import psl from "psl";
-import { addDynamicRule, deleteDynamicRule } from "../../common/editRules";
+import { addDynamicRule, deleteDynamicRule } from "../../common/editRules.js";
 
 /******************************************************************************/
 /******************************************************************************/

src/background/protection/protection.js

@@ -25,7 +25,7 @@ import {
   addDynamicRule,
   deleteDynamicRule,
   reloadDynamicRules,
-} from "../../common/editRules";
+} from "../../common/editRules.js";
 import { updateRemovalScript } from "../../common/editDomainlist.js";
 
 /******************************************************************************/

src/background/storage.js

@@ -12,7 +12,7 @@ If the domainlist is being handled, then cookies are added/removed here too
 
 import { openDB } from "idb";
 import { storageCookies } from "./storageCookies.js";
-import { reloadDynamicRules } from "../common/editRules";
+import { reloadDynamicRules } from "../common/editRules.js";
 import { saveAs } from "file-saver";
 
 /******************************************************************************/

src/common/editDomainlist.js

@@ -10,13 +10,13 @@ editDomainlist.js is an internal API modifying the domainlist / modifying the
 domainlist simultaneously with the dynamic ruleset
 */
 
-import { storage, stores } from "../background/storage";
+import { storage, stores } from "../background/storage.js";
 import {
   deleteAllDynamicRules,
   deleteDynamicRule,
   addDynamicRule,
   getFreshId,
-} from "./editRules";
+} from "./editRules.js";
 
 // TODO: Migrate editRules & editDomainlist to one file
 

src/common/editRules.js

@@ -3,7 +3,7 @@ Licensed per https://github.com/privacy-tech-lab/gpc-optmeowt/blob/main/LICENSE.
 privacy-tech-lab, https://privacytechlab.org/
 */
 
-import { storage, stores } from "../background/storage";
+import { storage, stores } from "../background/storage.js";
 
 /*
 editRules.js

src/data/defaultSettings.js

@@ -9,7 +9,7 @@ defaultSettings.js
 defaultSettings.js exports the default global extension settings
 */
 
-import { modes } from "./modes";
+import { modes } from "./modes.js";
 
 // We could also make the keys here the values of an enumerated object, but
 // there is less incentive to do so since it complicates the code and

src/options/options.js

@@ -17,11 +17,11 @@ import "../../node_modules/animate.css/animate.min.css";
 import "./styles.css";
 
 // HTML TO JS IMPORTS - TOP OF `popup.html`
-import "../../node_modules/uikit/dist/js/uikit";
-import "../../node_modules/uikit/dist/js/uikit-icons";
-import "../../node_modules/mustache/mustache";
-import "../../node_modules/@popperjs/core/dist/umd/popper";
-import "../../node_modules/tippy.js/dist/tippy-bundle.umd";
+import "../../node_modules/uikit/dist/js/uikit.js";
+import "../../node_modules/uikit/dist/js/uikit-icons.js";
+import "../../node_modules/mustache/mustache.js";
+import "../../node_modules/@popperjs/core/dist/umd/popper.js";
+import "../../node_modules/tippy.js/dist/tippy-bundle.umd.js";
 
 /**
  * Intializes scripts that build the options page

src/options/views/main-view/main-view.js

@@ -19,7 +19,7 @@ import { domainlistView } from "../domainlist-view/domainlist-view.js";
 import { analysisView } from "../analysis-view/analysis-view.js";
 import { aboutView } from "../about-view/about-view.js";
 import { storage, stores } from "../../../background/storage.js";
-import Darkmode from "../../../theme/darkmode";
+import Darkmode from "../../../theme/darkmode.js";
 
 /**
  * Opens the `Settings` page

src/options/views/settings-view/settings-view.js

@@ -18,14 +18,14 @@ import {
   storage,
   // extensionMode
 } from "../../../background/storage.js";
-import { csvGenerator } from "../../../common/csvGenerator";
+import { csvGenerator } from "../../../common/csvGenerator.js";
 import { modes } from "../../../data/modes.js";
 
 // Used in tutorial
-import UIkit from "../../../../node_modules/uikit/dist/js/uikit";
-import tippy from "../../../../node_modules/tippy.js/dist/tippy-bundle.umd";
+import UIkit from "../../../../node_modules/uikit/dist/js/uikit.js";
+import tippy from "../../../../node_modules/tippy.js/dist/tippy-bundle.umd.js";
 
-import "../../../../node_modules/file-saver/src/FileSaver";
+import "../../../../node_modules/file-saver/src/FileSaver.js";
 import Darkmode from "darkmode-js";
 import {
   addDynamicRule,

src/popup/popup.js

@@ -9,20 +9,20 @@ popup.js
 popup.js supplements and renders complex elements on popup.html
 */
 
-import { stores, storage } from "../background/storage";
-import { initIAB, isValidSignalIAB } from "../background/cookiesIAB";
-import { csvGenerator } from "../common/csvGenerator";
+import { stores, storage } from "../background/storage.js";
+import { initIAB, isValidSignalIAB } from "../background/cookiesIAB.js";
+import { csvGenerator } from "../common/csvGenerator.js";
 import { modes } from "../data/modes.js";
 import "../../node_modules/uikit/dist/css/uikit.min.css";
 import "../../node_modules/animate.css/animate.min.css";
 import "./styles.css";
 import psl from "psl";
-import "../../node_modules/uikit/dist/js/uikit";
-import "../../node_modules/uikit/dist/js/uikit-icons";
-import "../../node_modules/@popperjs/core/dist/umd/popper";
-import tippy from "../../node_modules/tippy.js/dist/tippy-bundle.umd";
+import "../../node_modules/uikit/dist/js/uikit.js";
+import "../../node_modules/uikit/dist/js/uikit-icons.js";
+import "../../node_modules/@popperjs/core/dist/umd/popper.js";
+import tippy from "../../node_modules/tippy.js/dist/tippy-bundle.umd.js";
 import UIkit from "uikit";
-import Darkmode from "../theme/darkmode";
+import Darkmode from "../theme/darkmode.js";
 
 import {
   addDomainToDomainlistAndRules,

webpack.config.js

@@ -3,17 +3,30 @@ Licensed per https://github.com/privacy-tech-lab/gpc-optmeowt/blob/main/LICENSE.
 privacy-tech-lab, https://privacytechlab.org/
 */
 
+/*
 const CopyPlugin = require("copy-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const path = require("path");
+*/
+
+
+import CopyPlugin from "copy-webpack-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 
 // ! Implement a "frontend" export in order to use a dev serve
 // ! Implement terser for production
 // ! Implement file loader for assets
 
-module.exports = (env, argv) => {
+export default (env, argv) => {
   const browser = env.chrome ? "chrome" : "firefox"; // default to firefox build
   const isProduction = argv.mode == "production"; // sets bool depending on build