feat: 脚本注入webview & 白屏路由切换

auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     AddServiceDrawer: typeof import('./src/components/AddServiceDrawer.vue')['default']
     ContextMenuPopover: typeof import('./src/components/ContextMenuPopover.vue')['default']
@@ -30,7 +28,6 @@ declare module '@vue/runtime-core' {
     Setting: typeof import('./src/components/Setting.vue')['default']
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']
     WebView: typeof import('./src/components/WebView.vue')['default']
-    WebviewEnable: typeof import('./src/components/WebviewEnable.vue')['default']
     WebViewEnable: typeof import('./src/components/WebViewEnable.vue')['default']
     WebViewError: typeof import('./src/components/WebViewError.vue')['default']
     WebViewHibernate: typeof import('./src/components/WebViewHibernate.vue')['default']

electron-builder.json5

@@ -3,7 +3,7 @@
  */
 {
   "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
-  "appId": "YourAppID",
+  "appId": "com.allInBox.com",
   "asar": true,
   "directories": {
     "output": "release/${version}"

electron/main/index.ts

@@ -61,7 +61,7 @@ async function createWindow() {
       // Consider using contextBridge.exposeInMainWorld
       // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
       nodeIntegration: true,
-      contextIsolation: false,
+      contextIsolation: true,
       webviewTag: true,
       plugins: true,
     },
@@ -99,6 +99,11 @@ async function createWindow() {
   })
   // win.webContents.on('will-navigate', (event, url) => { }) #344
   attachTitlebarToWindow(win)
+
+  win.webContents.on('will-attach-webview', (e, webPreferences) => {
+    console.log(webPreferences, e, 'qd');
+    webPreferences.preload = join(__dirname, '../../preload/preload.js')
+  })
 }
 
 app.whenReady().then(createWindow)

electron/preload/index.ts

@@ -1,4 +1,5 @@
 import { Titlebar, TitlebarColor } from 'custom-electron-titlebar'
+import { contextBridge } from 'electron'
 
 window.addEventListener('DOMContentLoaded', () => {
   // Title bar implementation
@@ -18,6 +19,11 @@ function domReady(condition: DocumentReadyState[] = ['complete', 'interactive'])
   })
 }
 
+contextBridge.exposeInMainWorld('API', {
+  // eslint-disable-next-line no-console
+  log: console.log,
+})
+
 const safeDOM = {
   append(parent: HTMLElement, child: HTMLElement) {
     if (!Array.from(parent.children).find(e => e === child))

eslint.config.js

@@ -0,0 +1,3 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu()

package.json

@@ -42,7 +42,7 @@
     "vue-router": "^4.2.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.43.1",
+    "@antfu/eslint-config": "^2.6.2",
     "@types/lodash-es": "^4.17.7",
     "@types/ms": "^0.7.31",
     "@vitejs/plugin-vue": "^4.2.3",

preload/preload.js

@@ -0,0 +1,44 @@
+// // window.addEventListener('DOMContentLoaded', () => {
+// //   console.log('domloaded')
+
+// // })
+
+// ferdium.log('testing')
+// function getMessages() {
+//   let directCount = 0
+//   const directCountPerServer = document.querySelectorAll(
+//     '[class*="lowerBadge_"] [class*="numberBadge_"]',
+//   )
+
+//   for (const directCountBadge of directCountPerServer)
+//     directCount += Number.parseInt(directCountBadge.textContent)
+
+//   const indirectCountPerServer
+//     = document.title.search('• Discord') === -1 ? 0 : 1
+
+//   // console.log(directCount);
+//   // window.api.log(directCount, 'directCount')
+//   // window.api.log(document.querySelectorAll(
+//   //   '[class*="lowerBadge_"] [class*="numberBadge_"]',
+//   // ))
+//   // window.api.log(document.title)
+//   // console.log(Ferdium)
+// }
+// // setInterval(getMessages, 1000)
+// console.log(document.querySelectorAll('input'))
+// console.log('ccc')
+// getMessages()
+// console.log(document)
+const { ipcRenderer } = require('electron')
+console.log('tttt')
+document.addEventListener('DOMContentLoaded', function () {
+  var data = {
+    'title': document.title,
+    'url': window.location.href,
+    'array': {
+        'array': ['1','2','3']
+    }
+  };
+  console.log(data, 'dddd')
+  ipcRenderer.sendToHost('data', data);
+});

src/App.vue

@@ -6,7 +6,7 @@ const services = useServiceStore()
 
 services.serviceMaintenanceTick()
 services.$subscribe((mutation, state) => {
-  if ((mutation.events as any).key !== 'teardown')
+  if ((mutation.events as any)?.key !== 'teardown')
     localStorage.setItem('services', JSON.stringify({ allServices: state.allServices.map(s => omit(s, '_webview')) }))
 })
 </script>

src/components/WebView.vue

@@ -1,5 +1,5 @@
 <script lang='ts' setup>
-import { onBeforeMount, onMounted, ref } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { ElectronWebView, Service } from '../types'
 import { useServiceStore } from '../store/services'
 
@@ -15,8 +15,19 @@ onMounted(() => {
   webViewRef.value?.addEventListener('did-fail-load', didFailLoad)
   webViewRef.value?.addEventListener('media-started-playing', () => services.didMediaPlaying({ serviceId: service.id }))
   webViewRef.value?.addEventListener('media-paused', () => services.didMediaPaused({ serviceId: service.id }))
+  webViewRef.value?.addEventListener('dom-ready', () => {
+    console.log('dom-ready')
+    webViewRef.value?.openDevTools()
+  })
+  console.log(webViewRef.value)
+  webViewRef.value?.addEventListener('ipc-message', (e: any) => {
+    console.log('ipc-message')
+    if (e.channel === 'data') {
+      console.log(e)
+    }
+  })
 })
-onBeforeMount(() => {
+onBeforeUnmount(() => {
   webViewRef.value?.removeEventListener('did-finish-load', didFinishLoad)
   webViewRef.value?.removeEventListener('did-finish-load', didFailLoad)
   webViewRef.value?.removeEventListener('media-started-playing', () => services.didMediaPlaying({ serviceId: service.id }))
@@ -25,16 +36,14 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <webview
-    :ref="(_webviewRef) => {
-      webViewRef = _webviewRef as unknown as ElectronWebView
-      emits('setWebview', _webviewRef)
-    }" autosize :src="service.url" style="display:inline-flex;"
-    class="w-100% h-100%" allowpopups
-    webpreferences="spellcheck=1, contextIsolation=1`"
-    :disablewebsecurity="true"
-    :partition="service.id"
-  />
+  <webview :ref="(_webviewRef: ElectronWebView) => {
+    webViewRef = _webviewRef as unknown as ElectronWebView
+    emits('setWebview', _webviewRef)
+  }" autosize :src="service.url" style="display:inline-flex;"
+    class="w-100% h-100%" allowpopups nodeintegration
+    webpreferences="spellcheck=1, contextIsolation=1, sandbox=false" :disablewebsecurity="true"
+    :partition="service.id" />
 </template>
-
-<style scoped></style>
+
+<style scoped>
+</style>

src/main.ts

@@ -5,7 +5,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import router from './router'
 import './style.scss'
 import App from './App.vue'
-import './samples/node-api'
+// import './samples/node-api'
 import 'normalize.css'
 
 const pinia = createPinia()

src/router/index.ts

@@ -1,8 +1,7 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { defineAsyncComponent } from 'vue'
-
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes: [
     {
       path: '/',

tsconfig.node.json

@@ -6,5 +6,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "package.json", "electron"]
+  "include": ["vite.config.ts", "package.json", "electron", "preload"]
 }