Rework extension so that controls are bound to page where they are easier to use instead of in the popup, rework html files to make use of react, unhide divs if all elements hidden

.eslintrc.json

@@ -18,7 +18,7 @@
       }
     ]
   },
-  "ignorePatterns": ["node_modules/", "dist/", "*.config.js", "scripts/"],
+  "ignorePatterns": ["node_modules/", "dist/", "*.config.js", "scripts/", "i18n.ts"],
   "env": {
     "browser": true,
     "webextensions": true

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# webpack-bundle-analyzer
+report.html

@types/global.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const value: any;
+  export = value;
+}

@types/i18next.d.ts

@@ -0,0 +1,11 @@
+import translation from "assets/_locales/en/messages.json";
+
+const resources = {
+  translation,
+} as const;
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: typeof resources;
+  }
+}

@types/style.d.ts

@@ -0,0 +1,9 @@
+import { CSSProp } from "styled-components";
+
+interface MyTheme {}
+
+declare module "react" {
+  interface Attributes {
+    css?: CSSProp<MyTheme>;
+  }
+}

Makefile

@@ -0,0 +1,20 @@
+win-build-gecko:
+	yarn win-build-gecko
+
+win-build-chromium:
+	yarn win-build-chromium
+
+nix-build-gecko:
+	yarn nix-build-gecko
+
+nix-build-chromium:
+	yarn nix-build-chromium
+
+gecko-dashboard:
+	yarn nix-build-chromium-dashboard
+
+chromium-dashboard:
+	yarn nix-build-chromium-dashboard
+
+report:
+	open report.html

engines/chromium/manifest.json

@@ -2,5 +2,6 @@
   "background": {
     "service_worker": "background.js",
     "type": "module"
-  }
+  },
+  "web_accessible_resources": []
 }

engines/chromium/webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const CopyPlugin = require("copy-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 const rootPath = path.resolve('./');
 const baseConfig = require(`${rootPath}/webpack.config.js`);
@@ -10,7 +9,7 @@ module.exports = (env, argv) => {
   return {
     ...baseConfig(env, argv),
     plugins: [
-      new CleanWebpackPlugin(),
+      ...baseConfig(env, argv).plugins,
       new CopyPlugin({
         patterns: [
           ...defaultCopyPluginPatterns,

engines/common/manifest/base.json → engines/common/manifest.json

@@ -1,7 +1,11 @@
 {
+  "name": "Amazon Brand Filter",
   "manifest_version": 3,
   "default_locale": "en",
   "icons": {
+    "16": "icons/abf-disabled-16.png",
+    "32": "icons/abf-disabled-32.png",
+    "48": "icons/abf-disabled-48.png",
     "128": "icons/abf-disabled-128.png"
   },
   "permissions": ["storage", "activeTab"],

engines/common/matches.json

@@ -0,0 +1,16 @@
+[
+  "*://*.amazon.com/*",
+  "*://*.amazon.ca/*",
+  "*://*.amazon.cn/*",
+  "*://*.amazon.co.jp/*",
+  "*://*.amazon.com/*",
+  "*://*.amazon.com.au/*",
+  "*://*.amazon.com.mx/*",
+  "*://*.amazon.co.uk/*",
+  "*://*.amazon.de/*",
+  "*://*.amazon.es/*",
+  "*://*.amazon.fr/*",
+  "*://*.amazon.in/*",
+  "*://*.amazon.it/*",
+  "*://*.amazon.nl/*"
+]

engines/common/web-accessible-resources.json

@@ -0,0 +1,4 @@
+{
+  "resources": ["container.css", "controls.html", "toggle.html"],
+  "matches": []
+}

engines/gecko/manifest.json

@@ -13,7 +13,7 @@
     "type": "module"
   },
   "content_security_policy": {
-    "extension_pages": "default-src 'self'; script-src 'self'; object-src 'none'; connect-src https://raw.githubusercontent.com/chris-mosley/AmazonBrandFilterList/main/brands.txt https://api.github.com/repos/chris-mosley/AmazonBrandFilterList/releases/latest;"
+    "extension_pages": "script-src 'self'; object-src 'none'; connect-src https://raw.githubusercontent.com/chris-mosley/AmazonBrandFilterList/main/brands.txt https://api.github.com/repos/chris-mosley/AmazonBrandFilterList/releases/latest;"
   },
   "web_accessible_resources": [
     {

engines/gecko/webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const CopyPlugin = require("copy-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 const rootPath = path.resolve('./');
 const baseConfig = require(`${rootPath}/webpack.config.js`);
@@ -10,7 +9,7 @@ module.exports = (env, argv) => {
   return {
     ...baseConfig(env, argv),
     plugins: [
-      new CleanWebpackPlugin(),
+      ...baseConfig(env, argv).plugins,
       new CopyPlugin({
         patterns: [
           ...defaultCopyPluginPatterns,

package.json

@@ -1,41 +1,55 @@
 {
-  "name": "AmazonBrandFilter",
   "description": "Filters out all unknown brands from Amazon search results.",
   "version": "0.5.0",
   "keywords": [],
   "author": "",
   "license": "MIT",
+  "private": true,
   "devDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
     "@jest/globals": "^29.7.0",
+    "@mui/icons-material": "^5.15.5",
+    "@mui/material": "^5.15.4",
+    "@mui/types": "^7.2.13",
     "@types/chrome": "^0.0.237",
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@types/web": "^0.0.130",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.2",
     "husky": "^8.0.3",
+    "i18next": "^23.7.16",
     "jest": "^29.7.0",
     "lint-staged": "^13.2.2",
+    "lodash": "^4.17.21",
     "prettier": "2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.0",
     "run-script-os": "^1.1.6",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.1.3",
     "web-ext": "^7.6.2",
     "webextension-polyfill-ts": "^0.26.0",
     "webpack": "^5.86.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21"
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dashboard": "^3.3.8"
   },
   "lint-staged": {
-    "src/**/*.ts": [
-      "prettier --write \"src/**/*.ts\""
+    "src/**/*.{ts,tsx}": [
+      "prettier --write \"src/**/*.{ts,tsx}\""
     ],
     "src/**/*.json": [
       "prettier --write \"src/**/*.json\""
@@ -56,8 +70,14 @@
     "lint": "yarn eslint src/**/*.ts",
     "test": "jest",
     "win-build-gecko": "Remove-Item dist -Recurse -Force; webpack --mode development --config engines/gecko/webpack.config.js; node scripts\\post-build-update-manifest.js",
+    "win-build-gecko-prod": "Remove-Item dist -Recurse -Force; webpack --mode production --config engines/gecko/webpack.config.js; node scripts\\post-build-update-manifest.js",
     "win-build-chromium": "Remove-Item dist -Recurse -Force; webpack --mode development --config engines/chromium/webpack.config.js; node scripts\\post-build-update-manifest.js",
+    "win-build-chromium-prod": "Remove-Item dist -Recurse -Force; webpack --mode production --config engines/chromium/webpack.config.js; node scripts\\post-build-update-manifest.js",
     "nix-build-gecko": "rm -rf dist && webpack --mode development --config engines/gecko/webpack.config.js && node scripts/post-build-update-manifest.js",
-    "nix-build-chromium": "rm -rf dist && webpack --mode development --config engines/chromium/webpack.config.js && node scripts/post-build-update-manifest.js"
+    "nix-build-gecko-prod": "rm -rf dist && webpack --mode production --config engines/gecko/webpack.config.js && node scripts/post-build-update-manifest.js",
+    "nix-build-gecko-dashboard": "rm -rf dist && webpack-dashboard -- webpack --mode production --config engines/gecko/webpack.config.js && node scripts/post-build-update-manifest.js",
+    "nix-build-chromium": "rm -rf dist && webpack --mode development --config engines/chromium/webpack.config.js && node scripts/post-build-update-manifest.js",
+    "nix-build-chromium-prod": "rm -rf dist && webpack --mode production --config engines/chromium/webpack.config.js && node scripts/post-build-update-manifest.js",
+    "nix-build-chromium-dashboard": "rm -rf dist && webpack-dashboard -- webpack --mode production --config engines/chromium/webpack.config.js && node scripts/post-build-update-manifest.js"
   }
 }

scripts/post-build-update-manifest.js

@@ -3,24 +3,54 @@ const path = require("path");
 
 const rootPath = path.resolve("./");
 const packageJson = require(`${rootPath}/package.json`);
-const baseManifestJson = require(`${rootPath}/engines/common/manifest/base.json`);
-const contentScriptsJson = require(`${rootPath}/engines/common/manifest/content-scripts.json`);
 const manifestFilePath = path.resolve(__dirname, `${rootPath}/dist/manifest.json`);
 
+let commonManifestJson = require(`${rootPath}/engines/common/manifest.json`);
+let commonMatchesJson = require(`${rootPath}/engines/common/matches.json`);
+let commonWebAccessibleResourcesJson = require(`${rootPath}/engines/common/web-accessible-resources.json`);
+
 try {
   // read the manifest file
+  // the base file from whichever engine is being built will exist before this script runs
   let manifest = JSON.parse(fs.readFileSync(manifestFilePath));
 
-  // update the relevant keys
-  manifest.version = packageJson.version;
-  manifest.name = packageJson.name;
-  manifest.description = packageJson.description;
-  manifest = { ...manifest, ...baseManifestJson, ...contentScriptsJson };
+  // update the matches in the web_accessible_resources json
+  commonWebAccessibleResourcesJson = {
+    ...commonWebAccessibleResourcesJson,
+    matches: commonMatchesJson,
+  };
+
+  // set the content_scripts and set the matches
+  commonManifestJson = {
+    ...commonManifestJson,
+    content_scripts: [
+      {
+        matches: commonMatchesJson,
+        js: ["content.js"],
+      },
+    ],
+  };
+
+  // take required keys from package.json
+  // manifest web_accessible_resources needs to be updated at this point
+  // also include the common manifest json
+  manifest = {
+    ...manifest,
+    version: packageJson.version,
+    description: packageJson.description,
+    web_accessible_resources: [...manifest.web_accessible_resources, commonWebAccessibleResourcesJson],
+    ...commonManifestJson,
+  };
 
   // write the updated manifest file
   fs.writeFileSync(manifestFilePath, JSON.stringify(manifest, null, 2));
-
   console.log(`Version updated to ${packageJson.version} in manifest.json.`);
+
+  // move the analyzer report.html out of the dist folder if it exists
+  if (fs.existsSync(`${rootPath}/dist/report.html`)) {
+    fs.renameSync(`${rootPath}/dist/report.html`, `${rootPath}/report.html`);
+    console.log(`Moved 'report.html' to ${rootPath}`);
+  }
 } catch (error) {
   console.error(`Error updating manifest.json: ${error.message}`);
 }

src/assets/_locales/de/messages.json

@@ -1,4 +1,9 @@
 {
+  "introduction": {
+    "message": "Amazon Brand Filter",
+    "warning": "Um diese Erweiterung zu nutzen, musst du auf einer Amazon-Marktplatzseite sein (z. B. amazon.com, amazon.co.uk, amazon.de usw.)",
+    "description": "Um loszulegen, klicke auf die Schaltfläche unten rechts auf der Seite!"
+  },
   "popup_enabled": {
     "message": "Aktivieren Sie Amazon Brand Filter",
     "description": "Aktivieren Sie Amazon Brand Filter"
@@ -58,5 +63,9 @@
   "popup_help_translate": {
     "message": "Help translate",
     "description": "Link to help translate the extension"
+  },
+  "popup_all_results_filtered": {
+    "message": "Alle Ergebnisse werden angezeigt, da alle Elemente gefiltert wurden",
+    "description": "Nachricht, die angezeigt wird, wenn alle Ergebnisse gefiltert sind"
   }
 }

src/assets/_locales/en/messages.json

@@ -1,4 +1,9 @@
 {
+  "introduction": {
+    "message": "Amazon Brand Filter",
+    "warning": "To use this extension, you must be on an Amazon marketplace site (e.g. amazon.com, amazon.co.uk, amazon.de, etc.)",
+    "description": "To get started, click on the button in the bottom right of the page!"
+  },
   "popup_enabled": {
     "message": "Enable Amazon Brand Filter",
     "description": "Enable Amazon Brand Filter"
@@ -58,5 +63,9 @@
   "popup_help_translate": {
     "message": "Help translate",
     "description": "Link to help translate the extension"
+  },
+  "popup_all_results_filtered": {
+    "message": "Showing all results as all items have been filtered",
+    "description": "Message to show when all results are filtered"
   }
 }

src/assets/_locales/es/messages.json

@@ -1,4 +1,9 @@
 {
+  "introduction": {
+    "message": "Amazon Brand Filter",
+    "warning": "Para utilizar esta extensión, debes estar en un sitio web de Amazon (por ejemplo, amazon.com, amazon.co.uk, amazon.de, etc.)",
+    "description": "Para comenzar, haz clic en el botón en la parte inferior derecha de la página!"
+  },
   "popup_enabled": {
     "message": "Activar Amazon Brand Filter",
     "description": "Activar el filtro de marcas de Amazon"
@@ -58,5 +63,9 @@
   "popup_help_translate": {
     "message": "Help translate",
     "description": "Link to help translate the extension"
+  },
+  "popup_all_results_filtered": {
+    "message": "Mostrando todos los resultados ya que todos los elementos han sido filtrados",
+    "description": "Mensaje a mostrar cuando todos los resultados están filtrados"
   }
 }