chrome 扩展

build/extraResources/chromeExtension/read.txt

@@ -0,0 +1 @@
+chrome应用商店ctx文件，解压后，放置在此目录中，打包时会将资源加入安装包内。

electron/config.js

@@ -83,8 +83,6 @@ const config = {
 }
 
 exports.get = function (flag = '', env = 'prod') {
-  console.log('[config] [get] flag:', flag);
-
   if (flag === 'egg') {
     const eggConfig = storage.getEggConfig();
     if (env === 'prod' && eggConfig.port) {

electron/ipc/example.js

@@ -290,7 +290,6 @@ exports.getTheme = function (event, channel, arg) {
   } else if (nativeTheme.shouldUseInvertedColorScheme) {
     theme = 'dark';
   }
-  console.log('[electron] [ipc] [example] [getTheme] theme:', theme);
 
   return theme;
 }
@@ -300,7 +299,7 @@ exports.getTheme = function (event, channel, arg) {
  */
 exports.setTheme = function (event, channel, arg) {
 
-  console.log('[electron] [ipc] [example] [setTheme] theme:', arg);
+  // TODO 好像没有什么明显效果
   nativeTheme.themeSource = arg;
 
   return arg;

electron/lib/api.js

@@ -10,8 +10,11 @@ const eLogger = require('./eLogger').get();
 
 const apis = {};
 
+/**
+ * 安装模块
+ */
 exports.setup = async function () {
-  eLogger.info('[api] [setup] start');
+  console.log('[electron-lib-api] [setup]');
   setApi();
 
   // use api server

electron/lib/autoUpdater.js

@@ -7,7 +7,11 @@ const {app} = require('electron');
 const eLogger = require('./eLogger').get();
 const helper = require('./helper');
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
+  console.log('[electron-lib-autoUpater] [setup]');
   const version = app.getVersion();
   eLogger.info('[autoUpdater] [setup] current version: ', version);
   const platformObj = helper.getPlatform();

electron/lib/awaken.js

@@ -8,6 +8,7 @@ const eLogger = require('./eLogger').get();
  * 唤起Electron应用
  */
 exports.setup = function () {
+	console.log('[electron-lib-awaken] [setup]');
 	const protocolInfo = config.get('awakeProtocol');
 	const PROTOCOL = protocolInfo.protocol;
 

electron/lib/chromeExtension.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const { app, session } = require('electron');
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path')
+const eLogger = require('./eLogger').get();
+
+/**
+ * 安装模块
+ */
+exports.setup = async function () {
+  console.log('[electron-lib-chromeExtension] [setup]');
+  const extensionIds = this.getAllIds();
+  
+  for (let i = 0; i < extensionIds.length; i++) {
+    await this.load(extensionIds[i]);
+  }
+}
+
+/**
+ * 获取扩展id列表（crx解压后的目录名，即是该扩展的id）
+ */
+exports.getAllIds = function () {
+  const extendsionDir = this.getDirectory();
+  const ids = getDirs(extendsionDir);
+
+  return ids;
+}
+
+/**
+ * 扩展所在目录
+ */
+exports.getDirectory = function () {
+  let extensionDirPath = '';
+  let variablePath = 'build'; // 打包前路径
+  if (app.isPackaged) {
+    variablePath = '..'; // 打包后路径
+  }
+  extensionDirPath = path.join(app.getAppPath(), variablePath, "extraResources", "chromeExtension");
+
+  return extensionDirPath;
+}
+
+/**
+ * 加载扩展
+ */
+exports.load = async function (extensionId = '') {
+  if (_.isEmpty(extensionId)) {
+    return false
+  }
+  
+  try {
+    const extensionPath = path.join(this.getDirectory(), extensionId);
+    console.log('[chromeExtension] [load] extensionPath:', extensionPath);
+    await session.defaultSession.loadExtension(extensionPath, { allowFileAccess: true });
+  } catch (e) {
+    eLogger.error('[chromeExtension] [load] load extension error extensionId:%s, errorInfo:%s', extensionId, e.toString());
+    return false
+  }
+
+  return true
+}
+
+/*
+ * 获取目录下所有文件夹
+ */
+function getDirs(dir) {
+  if (!dir) {
+    return [];
+  }
+
+  const components = [];
+  const files = fs.readdirSync(dir);
+  files.forEach(function(item, index) {
+    const stat = fs.lstatSync(dir + '/' + item);
+    if (stat.isDirectory() === true) {
+      components.push(item);
+    }
+  });
+
+  return components;
+};

electron/lib/crashReport.js

@@ -3,7 +3,11 @@
 const { crashReporter } = require('electron');
 const config = require('../config');
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
+  console.log('[electron-lib-crashReport] [setup]');
 	const options = config.get('crashReport');
-    crashReporter.start(options);
+  crashReporter.start(options);
 }

electron/lib/eLogger.js

@@ -24,7 +24,11 @@ class Log {
   }
 }
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
+  console.log('[electron-lib-eLogger] [setup]');
   return new Log();
 }
 

electron/lib/ipcMain.js

@@ -41,6 +41,7 @@ const getApiName = (jsname, method) => {
  * 加载所有的主程序
  */
 exports.setup = () => {
+  console.log('[electron-lib-ipc] [setup]');
   const ipcDir = path.normalize(__dirname + '/../ipc');
   fs.readdirSync(ipcDir).forEach(function (filename) {
     if (path.extname(filename) === '.js' && filename !== 'index.js') {

electron/lib/security.js

@@ -4,10 +4,10 @@ const helper = require('./helper');
 const eLogger = require('./eLogger').get();
 
 /**
- * security check
+ * 安装模块
  */
 exports.setup = function () {
-	eLogger.info('[security] [setup] process.argv:', process.argv);
+	console.log('[electron-lib-security] [setup]');
 	const runWithDebug = process.argv.find(function(e){
 		let isHasDebug = e.includes("--inspect") || e.includes("--inspect-brk") || e.includes("--remote-debugging-port");
 		return isHasDebug;

electron/lib/shortcut.js

@@ -3,8 +3,12 @@
 const { globalShortcut } = require('electron');
 const storage = require('./storage');
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
   // default
+  console.log('[electron-lib-shortcut] [setup]');
   storage.iniPreferences();
 }
 

electron/lib/storage.js

@@ -12,7 +12,11 @@ const pkg = require('../../package.json');
 const storageDb = 'db.json';
 const _ = require('lodash');
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
+  console.log('[electron-lib-storage] [setup]');
   const storageDir = this.getStorageDir();
   if (!fs.existsSync(storageDir)) {
     utils.mkdir(storageDir);

electron/lib/tray.js

@@ -5,7 +5,11 @@ const path = require('path');
 const helper = require('./helper');
 const config = require('../config');
 
+/**
+ * 安装模块
+ */
 exports.setup = function () {
+  console.log('[electron-lib-tray] [setup]');
   const cfg = config.get('tray');
 
   // 托盘图标

electron/preferences.js

@@ -6,8 +6,9 @@ const shortcut = require('./lib/shortcut');
 const tray = require('./lib/tray');
 const awaken = require('./lib/awaken');
 const security = require('./lib/security');
+const chromeExtension = require('./lib/chromeExtension');
 
-module.exports = () => {
+module.exports = async () => {
   // shortcut
   shortcut.setup();
 
@@ -20,6 +21,9 @@ module.exports = () => {
   // security 
   security.setup();
 
+  // chrome extension
+  await chromeExtension.setup();
+
   // check update
   const updateConfig = config.get('autoUpdate');
   if ((is.windows() && updateConfig.windows) || (is.macOS() && updateConfig.macOS)

frontend/src/config/router.config.js

@@ -29,6 +29,11 @@ export const constantRouterMap = [
             component: () => import('@/views/demo/socket/Index')
           },
           {
+            path: '/demo/extend/index',
+            name: 'DemoExtendIndex',
+            component: () => import('@/views/demo/extend/Index')
+          },
+          {
             path: '/demo/windowview/index',
             name: 'DemoWindowViewIndex',
             component: () => import('@/views/demo/windowview/Index')

frontend/src/layouts/DemoMenu.vue

@@ -36,6 +36,12 @@ export default {
           pageName: 'DemoSocketIndex',
           params: {}
         },
+        'menu_301' : {
+          icon: 'profile',
+          title: '扩展程序',
+          pageName: 'DemoExtendIndex',
+          params: {}
+        },
         'menu_400' : {
           icon: 'profile',
           title: '视图',

frontend/src/views/demo/extend/Index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="app-demo-screen">
+    <div class="one-block-1">
+      <span>
+        1. 
+      </span>
+    </div>
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="getTheme()">获取模式</a-button>
+      </a-space>
+      <span>
+        结果：{{ currentThemeMode }}
+      </span>
+    </div>
+    <div class="one-block-1">
+      2. 设置主题模式（请自行实现前端UI效果）
+    </div>  
+    <div class="one-block-2">
+
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      currentThemeMode: '',
+      themeList: [
+        'system',
+        'light',
+        'dark'
+      ]
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      this.$ipc.on('example.setTheme', (event, result) => {
+        console.log('result:', result)
+        self.currentThemeMode = result;
+      })
+
+      this.$ipc.on('example.getTheme', (event, result) => {
+        console.log('result:', result)
+        self.currentThemeMode = result;
+      })
+    },
+    setTheme (e) {
+      this.currentThemeMode = e.target.value;
+      console.log('setTheme currentThemeMode:', this.currentThemeMode)
+      this.$ipc.send('example.setTheme', this.currentThemeMode);
+    },
+    getTheme () {
+      this.$ipc.send('example.getTheme', '');
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-demo-screen {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/demo/theme/Index.vue

@@ -14,7 +14,7 @@
       </span>
     </div>
     <div class="one-block-1">
-      2. 设置主题模式（请自行实现前端UI）
+      2. 设置主题模式（请自行实现前端UI效果）
     </div>  
     <div class="one-block-2">
       <a-radio-group v-model="currentThemeMode" @change="setTheme">

main.js

@@ -67,7 +67,7 @@ async function createWindow () {
   }
 
   // options register
-  preferences()
+  await preferences()
 
   // egg server
   await startServer(eggConfig)