add favicon support

Author: Sneezry

_locales/en/messages.json

@@ -289,6 +289,10 @@
         "message": "Use Autofill",
         "description": "Use Autofill"
     },
+    "show_favicon": {
+        "message": "Show Issuer Icon",
+        "description": "Show Issuer Icon"
+    },
     "use_high_contrast": {
         "message": "Use High Contrast",
         "description": "Use High Contrast"

manifests/manifest-chrome-testing.json

@@ -56,6 +56,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
+        "favicon",
+        "chrome://favicon/",
         "https://www.google.com/",
         "https://*.dropboxapi.com/*",
         "https://www.googleapis.com/*",
@@ -65,5 +67,5 @@
     ],
     "offline_enabled": true,
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjo5++7m6mlJGqKOnlYehr9tjIqahMZBJUG7PLa7dSRk6bDUu2pVodO1TQWviHlrDTLP+zfoVbDBS8v8cjloK5Tn90nzC6a957dPzOfyC1WUNYNDlGM0BCmZKVP/MWB3d0ffOmTwaxh0L47aLH5nTW0AUmuwCWCBEEl4Acuyp7rwLNGlazBpaom1Qb5ckn29gCJVVVIZ6wudmcrG/FPTNJXQbg8N6wObGrgGOaxmowbkzJmIfKTyHlYOKLAjZ7aJi0W6jsy47/aV+ojvn4gO+ka6BcRhUeWgoQxqEky119f3OWiVP46SJVbAi0pkknThUjDvX11lATGjB5EvJZGyotwIDAQAB",
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; font-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/ ws://localhost:9090; default-src 'none'"
+    "content_security_policy": "script-src 'self' 'unsafe-eval'; font-src 'self'; img-src 'self' data: chrome://favicon/; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/ ws://localhost:9090; default-src 'none'"
 }

manifests/manifest-chrome.json

@@ -56,6 +56,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
+        "favicon",
+        "chrome://favicon/",
         "https://www.google.com/",
         "https://*.dropboxapi.com/*",
         "https://www.googleapis.com/*",
@@ -64,5 +66,5 @@
         "https://login.microsoftonline.com/common/oauth2/v2.0/token"
     ],
     "offline_enabled": true,
-    "content_security_policy": "script-src 'self'; font-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/; default-src 'none'"
+    "content_security_policy": "script-src 'self'; font-src 'self'; img-src 'self' data: chrome://favicon/; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/; default-src 'none'"
 }

manifests/manifest-edge.json

@@ -56,6 +56,8 @@
     ],
     "optional_permissions": [
         "clipboardWrite",
+        "favicon",
+        "chrome://favicon/",
         "https://www.google.com/",
         "https://*.dropboxapi.com/*",
         "https://www.googleapis.com/*",
@@ -64,5 +66,5 @@
         "https://login.microsoftonline.com/common/oauth2/v2.0/token"
     ],
     "offline_enabled": true,
-    "content_security_policy": "script-src 'self'; font-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/; default-src 'none'"
+    "content_security_policy": "script-src 'self'; font-src 'self'; img-src 'self' data: chrome://favicon/; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/; default-src 'none'"
 }

sass/popup.scss

@@ -212,6 +212,13 @@ svg {
     display: none;
   }
 
+  .issuerFavicon {
+    vertical-align: bottom;
+    margin-right: 5px;
+    height: 14px;
+    width: 14px;
+  }
+
   &:hover {
     padding-right: 0;
     overflow-y: scroll;

src/components/Popup/EntryComponent.vue

@@ -38,7 +38,16 @@
     >
       <IconRedo />
     </div>
-    <div class="issuer">{{ entry.issuer.split("::")[0] }}</div>
+    <div class="issuer">
+      <img
+        class="issuerFavicon"
+        v-if="shouldShowFavicon() && entry.issuer.split('::')[1]"
+        v-bind:src="getFaviconUrl(entry.issuer.split('::')[1])"
+      /><IconMedal
+        class="issuerFavicon"
+        v-if="shouldShowFavicon() && !entry.issuer.split('::')[1]"
+      />{{ entry.issuer.split("::")[0] }}
+    </div>
     <div class="issuerEdit">
       <input
         v-bind:placeholder="i18n.issuer"
@@ -91,6 +100,7 @@ import IconRedo from "../../../svg/redo.svg";
 import IconQr from "../../../svg/qrcode.svg";
 import IconBars from "../../../svg/bars.svg";
 import IconPin from "../../../svg/pin.svg";
+import IconMedal from "../../../svg/medal.svg";
 
 const computedPrototype = [
   mapState("accounts", [
@@ -131,6 +141,20 @@ export default Vue.extend({
         entry.type !== OTPType.steam
       );
     },
+    shouldShowFavicon() {
+      return (
+        navigator.userAgent.indexOf("Firefox") === -1 &&
+        this.$store.state.menu.showFavicon
+      );
+    },
+    getFaviconUrl(u: string) {
+      // for MV3
+      // const url = new URL(chrome.runtime.getURL("/_favicon/"));
+      // url.searchParams.set("pageUrl", "https://" + u);
+      // url.searchParams.set("size", "16");
+      // return url.toString();
+      return "chrome://favicon/https://" + u;
+    },
     showCode(code: string) {
       if (code === CodeState.Encrypted) {
         return this.i18n.encrypted;
@@ -255,6 +279,7 @@ export default Vue.extend({
     IconQr,
     IconBars,
     IconPin,
+    IconMedal,
   },
 });
 

src/components/Popup/PreferencesPage.vue

@@ -34,6 +34,11 @@
       :disabled="storageArea"
       @change="migrateStorage()"
     />
+    <a-toggle-input
+      :label="i18n.show_favicon"
+      v-model="showFavicon"
+      v-if="isNotFirefox"
+    />
     <div class="control-group" v-show="encryption.getEncryptionStatus()">
       <label class="combo-label">{{ i18n.autolock }}</label>
       <input
@@ -118,11 +123,28 @@ export default Vue.extend({
         this.newStorageLocation = value ? "sync" : "local";
       },
     },
+    showFavicon: {
+      get(): boolean {
+        return this.$store.state.menu.showFavicon;
+      },
+      set(showFavicon: boolean) {
+        chrome.permissions.request(
+          { permissions: ["favicon"], origins: ["chrome://favicon/"] },
+          (granted) => {
+            this.$store.commit(
+              "menu/setShowFavicon",
+              granted ? showFavicon : false
+            );
+          }
+        );
+      },
+    },
   },
   data() {
     return {
       newStorageLocation:
         this.$store.state.menu.storageArea || localStorage.storageLocation,
+      isNotFirefox: navigator.userAgent.indexOf("Firefox") === -1,
     };
   },
   methods: {

src/definitions/module-interface.d.ts

@@ -37,6 +37,7 @@ interface MenuState {
   theme: string;
   backupDisabled: boolean;
   storageArea: "sync" | "local";
+  showFavicon: boolean;
 }
 
 interface StyleState {

src/store/Menu.ts

@@ -8,6 +8,7 @@ export class Menu implements Module {
         zoom: Number(localStorage.zoom) || 100,
         useAutofill: localStorage.autofill === "true",
         smartFilter: localStorage.smartFilter !== "false",
+        showFavicon: localStorage.showFavicon === "true",
         theme:
           localStorage.theme ||
           (localStorage.highContrast === "true" ? "accessibility" : "normal"),
@@ -37,6 +38,10 @@ export class Menu implements Module {
           state.smartFilter = smartFilter;
           localStorage.smartFilter = smartFilter;
         },
+        setShowFavicon(state: MenuState, showFavicon: boolean) {
+          state.showFavicon = showFavicon;
+          localStorage.showFavicon = showFavicon;
+        },
         setTheme(state: MenuState, theme: string) {
           state.theme = theme;
           localStorage.theme = theme;