Generate extension icons from single vector source

assets/app-icon.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="192px" height="192px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>app-icon</title>
+    <defs>
+        <filter x="-16.4%" y="-11.6%" width="132.8%" height="123.2%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.301764642 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M10.7368421,164 C13.9649123,164 16.5614035,162.990234 18.5263158,160.970701 C20.4912281,158.951168 21.4736842,156.409342 21.4736842,153.345223 L21.4736842,153.345223 L21.4736842,96.9375796 C26.3859649,102.787261 32.3157895,107.418259 39.2631579,110.830573 C46.2105263,114.242887 53.8245614,115.949045 62.1052632,115.949045 C72.3508772,115.949045 81.5438596,113.407219 89.6842105,108.323567 C97.8245614,103.239915 104.245614,96.3456476 108.947368,87.6407643 C113.649123,78.9358811 116,69.0819533 116,58.0789809 C116,47.0760085 113.438596,37.1872611 108.315789,28.4127389 C103.192982,19.6382166 96.2807018,12.7091295 87.5789474,7.62547771 C78.877193,2.5418259 68.9824561,0 57.8947368,0 C46.9473684,0 37.122807,2.5418259 28.4210526,7.62547771 C19.7192982,12.7091295 12.8421053,19.6382166 7.78947368,28.4127389 C2.73684211,37.1872611 0.140350877,47.0760085 0,58.0789809 L0,58.0789809 L0,153.345223 C0,156.409342 1.01754386,158.951168 3.05263158,160.970701 C5.0877193,162.990234 7.64912281,164 10.7368421,164 Z M57.8947368,97.1464968 C50.877193,97.1464968 44.5263158,95.4403397 38.8421053,92.0280255 C33.1578947,88.6157113 28.7017544,83.9498938 25.4736842,78.0305732 C22.245614,72.1112527 20.6315789,65.4607219 20.6315789,58.0789809 C20.6315789,50.5579618 22.245614,43.8377919 25.4736842,37.9184713 C28.7017544,31.9991507 33.1578947,27.3333333 38.8421053,23.9210191 C44.5263158,20.5087049 50.877193,18.8025478 57.8947368,18.8025478 C65.0526316,18.8025478 71.4385965,20.5087049 77.0526316,23.9210191 C82.6666667,27.3333333 87.122807,31.9991507 90.4210526,37.9184713 C93.7192982,43.8377919 95.3684211,50.5579618 95.3684211,58.0789809 C95.3684211,65.4607219 93.7192982,72.1112527 90.4210526,78.0305732 C87.122807,83.9498938 82.6666667,88.6157113 77.0526316,92.0280255 C71.4385965,95.4403397 65.0526316,97.1464968 57.8947368,97.1464968 Z" id="path-2"></path>
+        <linearGradient x1="1.56739876e-14%" y1="-3.00182584e-15%" x2="100%" y2="82.8321745%" id="linearGradient-4">
+            <stop stop-color="#F2711C" offset="0%"></stop>
+            <stop stop-color="#A333C8" offset="33.6009474%"></stop>
+            <stop stop-color="#2185D0" offset="64.4421984%"></stop>
+            <stop stop-color="#21BA45" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="app-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rectangle" filter="url(#filter-1)" transform="translate(38.000000, 14.000000)">
+            <mask id="mask-3" fill="white">
+                <use xlink:href="#path-2"></use>
+            </mask>
+            <path stroke="#FFFFFF" stroke-width="7" d="M57.8947368,-3.5 C69.6465467,-3.5 80.1251645,-0.782606402 89.3444723,4.60340527 C98.5730065,9.99480711 105.905263,17.3420697 111.338365,26.648076 C116.765897,35.9445409 119.5,46.4176838 119.5,58.0789809 C119.5,69.7052637 116.993176,80.1094182 112.026872,89.3040916 C107.026943,98.5610186 100.193636,105.886867 91.53814,111.292227 C82.8505733,116.717616 73.0433209,119.449045 62.1052632,119.449045 C53.2631503,119.449045 45.1368206,117.61491 37.7201503,113.97209 C33.3118332,111.806873 29.2890529,109.179952 25.6512591,106.09203 L24.9736842,105.507642 L24.9736842,153.387919 C24.8723682,157.721597 23.5079649,160.869587 21.0348805,163.411418 C18.4371772,166.081333 15.0299709,167.5 10.7368421,167.5 C6.64593675,167.5 3.27528481,166.12252 0.587270387,163.45505 C-2.01780238,160.869889 -3.40263949,157.649993 -3.4950479,153.764117 L-3.5,153.345223 L-3.5,58.047502 L-3.4854933,57.2410981 C-3.22371545,45.9212813 -0.464594133,35.7330859 4.75638984,26.6661987 C10.1193007,17.3528379 17.4195806,9.99913783 26.6555277,4.60340527 C35.8785323,-0.784766115 46.2876156,-3.5 57.8947368,-3.5 Z M57.8947368,22.3025478 C51.5436043,22.3025478 45.790302,23.8321484 40.6435344,26.9218279 C35.4982727,30.0106033 31.4680801,34.2368124 28.5464606,39.5941937 C25.5867045,45.021506 24.1315789,51.1875543 24.1315789,58.0789809 C24.1315789,64.8370743 25.5895141,70.9326905 28.5464606,76.3548509 C31.4680801,81.7122322 35.4982727,85.9384413 40.6435344,89.0272167 C45.790302,92.1168961 51.5436043,93.6464968 57.8947368,93.6464968 C64.3688355,93.6464968 70.1534147,92.1256844 75.2347319,89.0371659 C80.3310028,85.9395583 84.3702367,81.6992044 87.363639,76.3269823 C90.3802599,70.9130901 91.8684211,64.8267733 91.8684211,58.0789809 C91.8684211,51.1979834 90.3831783,45.0411921 87.363639,39.6220623 C84.3702367,34.2498402 80.3310028,30.0094862 75.2347319,26.9118786 C70.1534147,23.8233602 64.3688355,22.3025478 57.8947368,22.3025478 Z"></path>
+            <polygon fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(59.500000, 80.500000) rotate(360.000000) translate(-59.500000, -80.500000) " points="-62 -41 181 -41 181 202 -62 202"></polygon>
+        </g>
+    </g>
+</svg>

packages/extension/package.json

@@ -29,6 +29,7 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
     "http-server": "^0.12.3",
+    "sharp": "^0.29.1",
     "style-loader": "^2.0.0",
     "ts-loader": "^9.2.2",
     "ts-node": "^10.0.0",
@@ -39,4 +40,4 @@
   "scripts": {
     "build": "webpack"
   }
-}
+}

packages/extension/src/background.ts

@@ -53,6 +53,7 @@ class ExtensionBackground {
             this._contextMenuClicked(menuItemId as string)
         );
 
+        this.app.load();
         // browser.commands.onCommand.addListener(command => this._executeCommand(command));
     }
 
@@ -81,10 +82,10 @@ class ExtensionBackground {
         }
 
         const field = item.item.fields[index];
-        const value = await field.transform()
+        const value = await field.transform();
         await messageTab({
             type: "fillActive",
-            value
+            value,
         });
 
         // this._openItem(item.item, index ? parseInt(index) : undefined);
@@ -146,9 +147,11 @@ class ExtensionBackground {
         if (this.app.state.locked) {
             await browser.contextMenus.create({
                 id: "openPopup",
-                title: `${count > 1 ? `${count} items` : "1 item" } found${!openPopupAvailable ? " (unlock to view)" : ""}`,
+                title: `${count > 1 ? `${count} items` : "1 item"} found${
+                    !openPopupAvailable ? " (unlock to view)" : ""
+                }`,
                 enabled: openPopupAvailable,
-                contexts: ["editable"]
+                contexts: ["editable"],
             });
         } else {
             const items = await this._getItemsForTab();
@@ -156,7 +159,7 @@ class ExtensionBackground {
                 await browser.contextMenus.create({
                     id: `item/${item.id}`,
                     title: item.name,
-                    contexts: ["editable"]
+                    contexts: ["editable"],
                 });
 
                 for (const [index, field] of item.fields.entries()) {
@@ -164,7 +167,7 @@ class ExtensionBackground {
                         parentId: `item/${item.id}`,
                         id: `item/${item.id}/${index}`,
                         title: field.name,
-                        contexts: ["editable"]
+                        contexts: ["editable"],
                     });
                 }
             }
@@ -184,7 +187,7 @@ class ExtensionBackground {
 
     private _updateIcon() {
         if (!this.app.account) {
-            browser.browserAction.setIcon({ path: "icon-locked.png" });
+            browser.browserAction.setIcon({ path: "icon-grayscale.png" });
             browser.browserAction.setTitle({ title: "Please Log In" });
         } else {
             browser.browserAction.setIcon({ path: "icon.png" });

packages/extension/src/popup.html

@@ -6,12 +6,12 @@
 
         <style>
             body {
-                background: linear-gradient(rgb(89, 198, 255), rgb(7, 124, 185));
+                background: var(--app-backdrop-background);
+                color: var(--app-backdrop-color);
                 width: 350px;
                 height: 600px;
                 margin: 0;
                 overscroll-behavior: none;
-                color: #fff;
             }
 
             @keyframes spin {
@@ -53,7 +53,6 @@
                     rotate linear 1.2s infinite;
             }
         </style>
-
     </head>
     <body>
         <svg viewBox="0 0 100 100" class="spinner">

packages/extension/src/popup.ts

@@ -1,8 +1,5 @@
 import { setPlatform } from "@padloc/core/src/platform";
 import { ExtensionPlatform } from "./platform";
-import "../assets/icon.png";
-import "../assets/icon-warning.png";
-import "../assets/icon-locked.png";
 
 (async () => {
     setPlatform(new ExtensionPlatform());

packages/extension/webpack.config.js

@@ -4,9 +4,11 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const { version } = require("./package.json");
 const manifest = require("./src/manifest.json");
+const fs = require("fs");
+const sharp = require("sharp");
 
 const serverUrl = process.env.PL_SERVER_URL || `http://0.0.0.0:${process.env.PL_SERVER_PORT || 3000}`;
-const assetsDir = process.env.PL_ASSETS_DIR || "../app/assets";
+const assetsDir = process.env.PL_ASSETS_DIR || "../../assets";
 
 module.exports = {
     entry: {
@@ -67,13 +69,13 @@ module.exports = {
             meta: {
                 "Content-Security-Policy": {
                     "http-equiv": "Content-Security-Policy",
-                    content: `default-src 'self' ${serverUrl} blob:; style-src 'self' 'unsafe-inline'; object-src 'self' blob:; frame-src 'self'; img-src 'self' blob: data:`,
+                    content: `default-src 'self' ${serverUrl} blob:; style-src 'self' 'unsafe-inline'; object-src 'self' blob:; frame-src 'self'; img-src 'self' blob: data: *`,
                 },
             },
         }),
         {
             apply(compiler) {
-                compiler.hooks.emit.tap("Web Extension Manifest", (compilation) => {
+                compiler.hooks.emit.tapPromise("Web Extension Manifest", async (compilation) => {
                     const jsonString = JSON.stringify(
                         {
                             ...manifest,
@@ -88,6 +90,24 @@ module.exports = {
                         size: () => jsonString.length,
                     };
 
+                    const baseIcon = await sharp(path.resolve(__dirname, assetsDir, "app-icon.svg")).resize({
+                        width: 128,
+                        height: 128,
+                    });
+
+                    const iconNormal = await baseIcon.png().toBuffer();
+                    const iconGrayscale = await baseIcon.grayscale(true).png().toBuffer();
+
+                    compilation.assets["icon.png"] = {
+                        source: () => iconNormal,
+                        size: () => Buffer.byteLength(iconNormal),
+                    };
+
+                    compilation.assets["icon-grayscale.png"] = {
+                        source: () => iconGrayscale,
+                        size: () => Buffer.byteLength(iconGrayscale),
+                    };
+
                     return true;
                 });
             },

packages/pwa/webpack.config.js

@@ -9,7 +9,7 @@ const { version } = require("./package.json");
 
 const out = process.env.PL_PWA_DIR || path.resolve(__dirname, "dist");
 const serverUrl = process.env.PL_SERVER_URL || `http://0.0.0.0:${process.env.PL_SERVER_PORT || 3000}`;
-const assetsDir = process.env.PL_ASSETS_DIR || "../app/assets";
+const assetsDir = process.env.PL_ASSETS_DIR || "../../assets";
 
 module.exports = {
     entry: path.resolve(__dirname, "src/index.ts"),