extensions for settings show.

client/src/components/RoomInfo.vue

@@ -165,7 +165,7 @@
               <v-simple-table>
                 <template v-slot:default>
                   <tbody>
-                    <tr><th> Extensions </th><td>{{ settings.browser_policy.content.extensions }}</td></tr>
+                    <tr><th> Extensions </th><td>{{ BrowserExtensions(settings.browser_policy.content.extensions).join(', ') }}</td></tr>
                     <tr><th> Developer tools </th><td>{{ settings.browser_policy.content.developer_tools }}</td></tr>
                     <tr><th> Persistent data </th><td>{{ settings.browser_policy.content.persistent_data }}</td></tr>
                   </tbody>
@@ -182,7 +182,13 @@
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import { RoomStats, RoomMember, RoomSettings, RoomEntry } from '@/api/index'
+
+import {
+  RoomStats,
+  RoomMember,
+  RoomSettings,
+  RoomEntry,
+} from '@/api/index'
 
 @Component
 export default class RoomInfo extends Vue {
@@ -253,5 +259,27 @@ export default class RoomInfo extends Vue {
       this.statsLoading = false
     }
   }
+
+  get allBrowserExtensions() {
+    if (!this.settings?.browser_policy?.type) return {}
+
+    /*return this.$store.state.browserPolicyExtensions.map(({ text, value }: {
+        text: string;
+        value: Record<BrowserPolicyTypeEnum, BrowserPolicyExtension>;
+      }) => [value[this.settings.browser_policy.type], text])*/
+    
+    const obj = {} as Record<string, string>
+    for (const { value, text } of this.$store.state.browserPolicyExtensions) {
+      const id = value[this.settings.browser_policy.type].id
+      obj[id] = text
+    }
+
+    return obj
+  }
+
+  BrowserExtensions(extensions: { id: string }[]) {
+    return extensions.map(({ id }: { id: string }) =>
+      id in this.allBrowserExtensions ? this.allBrowserExtensions[id] : id)
+  }
 }
 </script>