style(icons): konwersja ikon svg na png kompatybilne z Chrome

Wygenerowanie wersji PNG (16px, 20px i 24px) wszystkich ikon SVG przy użyciu komendy Inkscape z wiersza poleceń

Główna ikona wtyczki (dla manifest.json) Chrome oczekuje konkretnych rozmiarów, stadndardowych dla Chrome (16, 32, 48, 128), ale ikony interfejsu (używane wewnątrz stron rozszerzenia) Chrome mogą mieć dowolny rozmiar, ponieważ to zwykłe obrazy w HTML. Ustawiłem je zgodnie z naszymi obecnymi rozmiarami (16, 20, 24px)

użyta komenda for svg in assets/icons/*.svg; do basename=$(basename "$svg" .svg); for size in 16 20 24; do inkscape --export-type=png --export-width=$size --export-height=$size --export-background-opacity=0 "$svg" --export-filename="assets/icons/${basename}-${size}.png"; done; done

package-lock.json

@@ -19,6 +19,7 @@
                 "tai-password-strength": "^1.1.3"
             },
             "devDependencies": {
+                "@types/chrome": "^0.1.3",
                 "@types/events": "^3.0.0",
                 "@types/react-dom": "^17.0.9",
                 "addons-linter": "^4.7.0",
@@ -319,6 +320,16 @@
                 "node": ">=6"
             }
         },
+        "node_modules/@types/chrome": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.1.3.tgz",
+            "integrity": "sha512-KVOIHEKjDZXMg8c18Ir3kbLc+bb8JxZjNJv27Wen3F0I/eeTyrYm7tWOjGhoBjI9fFQfjsTSyFcENBo9Wbl5kw==",
+            "dev": true,
+            "dependencies": {
+                "@types/filesystem": "*",
+                "@types/har-format": "*"
+            }
+        },
         "node_modules/@types/decompress": {
             "version": "4.2.4",
             "resolved": "https://registry.npmjs.org/@types/decompress/-/decompress-4.2.4.tgz",
@@ -347,6 +358,21 @@
             "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
             "dev": true
         },
+        "node_modules/@types/filesystem": {
+            "version": "0.0.36",
+            "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.36.tgz",
+            "integrity": "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==",
+            "dev": true,
+            "dependencies": {
+                "@types/filewriter": "*"
+            }
+        },
+        "node_modules/@types/filewriter": {
+            "version": "0.0.33",
+            "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
+            "integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==",
+            "dev": true
+        },
         "node_modules/@types/got": {
             "version": "8.3.6",
             "resolved": "https://registry.npmjs.org/@types/got/-/got-8.3.6.tgz",
@@ -357,6 +383,12 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/har-format": {
+            "version": "1.2.16",
+            "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz",
+            "integrity": "sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==",
+            "dev": true
+        },
         "node_modules/@types/minimatch": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -7390,6 +7422,16 @@
                 "defer-to-connect": "^1.0.1"
             }
         },
+        "@types/chrome": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.1.3.tgz",
+            "integrity": "sha512-KVOIHEKjDZXMg8c18Ir3kbLc+bb8JxZjNJv27Wen3F0I/eeTyrYm7tWOjGhoBjI9fFQfjsTSyFcENBo9Wbl5kw==",
+            "dev": true,
+            "requires": {
+                "@types/filesystem": "*",
+                "@types/har-format": "*"
+            }
+        },
         "@types/decompress": {
             "version": "4.2.4",
             "resolved": "https://registry.npmjs.org/@types/decompress/-/decompress-4.2.4.tgz",
@@ -7418,6 +7460,21 @@
             "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
             "dev": true
         },
+        "@types/filesystem": {
+            "version": "0.0.36",
+            "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.36.tgz",
+            "integrity": "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==",
+            "dev": true,
+            "requires": {
+                "@types/filewriter": "*"
+            }
+        },
+        "@types/filewriter": {
+            "version": "0.0.33",
+            "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
+            "integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==",
+            "dev": true
+        },
         "@types/got": {
             "version": "8.3.6",
             "resolved": "https://registry.npmjs.org/@types/got/-/got-8.3.6.tgz",
@@ -7428,6 +7485,12 @@
                 "@types/node": "*"
             }
         },
+        "@types/har-format": {
+            "version": "1.2.16",
+            "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz",
+            "integrity": "sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==",
+            "dev": true
+        },
         "@types/minimatch": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",

package.json

@@ -1,15 +1,23 @@
 {
     "name": "rentgen",
     "version": "0.1.10",
-    "description": "Rentgen is an add-on prepared for Firefox-based browsers. This extension will automatically visualize all the data that a given website sends to third parties.",
+    "description": "Rentgen is an add-on prepared for both Firefox-based and Chromium-based browsers. This extension will automatically visualize all the data that a given website sends to third parties.",
     "main": "esbuild.config.js",
     "type": "module",
     "scripts": {
         "build": "node esbuild.config.js",
+        "build:firefox": "TARGET=firefox node esbuild.config.js",
+        "build:chrome": "TARGET=chrome node esbuild.config.js",
         "watch": "node esbuild.config.js --watch",
+        "watch:firefox": "TARGET=firefox node esbuild.config.js --watch",
+        "watch:chrome": "TARGET=chrome node esbuild.config.js --watch",
         "ext-test": "web-ext run",
         "build-addon": "npm i && npm run build && npm run create-package",
+        "build-addon:firefox": "npm i && npm run build:firefox && npm run create-package:firefox",
+        "build-addon:chrome": "npm i && npm run build:chrome && npm run create-package:chrome",
         "create-package": "web-ext build --ignore-files '!**/node_modules' '!**/node_modules/**/react-dom' '!**/node_modules/**/react-dom/umd' '!**/node_modules/**/*/react-dom.production.min.js' '!**/node_modules/**/react' '!**/node_modules/**/react/umd' '!**/node_modules/**/*/react.production.min.js' '!**/node_modules/**/survey-react'  '!**/node_modules/**/survey-react/*.min.js' '!**/node_modules/**/survey-react/*.min.css' --overwrite-dest",
+        "create-package:firefox": "cd dist-firefox && web-ext build --overwrite-dest --artifacts-dir ../web-ext-artifacts",
+        "create-package:chrome": "cd dist-chrome && 7z a -tzip ../web-ext-artifacts/rentgen-chrome-0.1.10.zip * && cd ..",
         "typecheck": "tsc --noEmit",
         "lint": "web-ext lint"
     },
@@ -43,6 +51,7 @@
         "tracking"
     ],
     "devDependencies": {
+        "@types/chrome": "^0.1.3",
         "@types/events": "^3.0.0",
         "@types/react-dom": "^17.0.9",
         "addons-linter": "^4.7.0",