main: add context bridge communication example via preload script, set nodeIntegration to false by default, improve security

src/renderer/main.ts

@@ -6,6 +6,14 @@ import router from '@/renderer/router'
 import vuetify from '@/renderer/plugins/vuetify'
 import i18n from '@/renderer/plugins/i18n'
 
+// Add API key defined in contextBridge to window object type
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    mainApi?: any
+  }
+}
+
 const app = createApp(App)
 
 app.use(vuetify).use(i18n).use(router).use(createPinia())

src/renderer/screens/MainScreen.vue

@@ -11,9 +11,16 @@ const { counterIncrease } = useTempStore()
 const { counter } = storeToRefs(useTempStore())
 const theme = useTheme()
 const languages = ref(['en'])
+const appVersion = ref('Unknown')
 
 onMounted((): void => {
   languages.value = availableLocales
+
+  // Get application version from package.json version string (Using IPC communication)
+  window.mainApi.receive('msgReceivedVersion', (version: string) => {
+    appVersion.value = version
+  })
+  window.mainApi.send('msgRequestGetVersion')
 })
 
 const handleChangeTheme = (): void => {
@@ -51,6 +58,9 @@ const handleCountIncrease = (): void => {
       <v-col cols="12" md="7">
         <h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
         <p>{{ $t('desc.welcome-desc') }}</p>
+        <p class="my-4"
+          >App Version: <strong>{{ appVersion }}</strong></p
+        >
         <v-row class="my-4">
           <v-col cols="3">
             <v-btn icon color="primary" @click="handleChangeTheme">

src/renderer/utils/index.ts

@@ -1,12 +1,10 @@
-import { shell } from 'electron'
-
 export default class Utils {
   static getCurrentLocale(): string {
     return navigator?.language?.split('-')[0] || 'en'
   }
 
   static async openExternal(url: string): Promise<void> {
-    await shell.openExternal(url)
+    await window.mainApi.openExternal(url)
   }
 }