feat: vscode代码同步

build/scriptcat/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "ScriptCat",
-    "version": "0.6.4",
+    "version": "0.7.0",
     "description": "脚本猫,一个用户脚本的框架,可编写脚本每天帮你自动处理事务.",
     "background": {
         "page": "background.html"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "scriptcat",
-    "version": "0.6.4",
+    "version": "0.7.0",
     "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
     "scripts": {
         "test": "jest",

src/apps/config.ts

@@ -1,3 +1,3 @@
-export const ExtVersion = "0.6.4";
+export const ExtVersion = "0.7.0";
 
 export const Server = process.env.NODE_ENV == "production" ? "https://sc.icodef.com/" : "http://localhost:8080/";

src/apps/msg-center/event.ts

@@ -42,6 +42,9 @@ export const OpenImportFileWindow: string = "open-import-file-window";
 export const ImportFile: string = "import-file";
 export const RequestImportFile: string = "request-import-file";
 
+export const ToolsConnectVSCode = "tools-connect-vscode";
+export const ToolsDisconnecttVSCode = "tools-disconnect-vscode";
+
 // 单页面内的消息
 export class AppEvent {
     public static eventMap = new Map<string, Map<any, any>>();

src/apps/tools/controller.ts

@@ -0,0 +1,22 @@
+import { ToolsConnectVSCode, ToolsDisconnecttVSCode } from "../msg-center/event";
+import { MsgCenter } from "../msg-center/msg-center";
+
+export class ToolsController {
+
+	public connectVScode(url: string) {
+		return new Promise(resolve => {
+			MsgCenter.sendMessage(ToolsConnectVSCode, url, resp => {
+				resolve(resp);
+			});
+		});
+	}
+
+	public disconnectVScode(url: string) {
+		return new Promise(resolve => {
+			MsgCenter.sendMessage(ToolsDisconnecttVSCode, undefined, resp => {
+				resolve(resp);
+			});
+		});
+	}
+
+}

src/apps/tools/manager.ts

@@ -0,0 +1,76 @@
+import { Manager } from "@App/pkg/apps/manager";
+import { ToolsConnectVSCode, ToolsDisconnecttVSCode } from "../msg-center/event";
+import { ScriptController } from "../script/controller";
+import { ScriptManager } from "../script/manager";
+
+
+export class ToolsManager extends Manager {
+
+	protected scriptManager: ScriptManager;
+	protected scriptController: ScriptController = new ScriptController();
+
+	protected wsc?: WebSocket;
+
+	constructor(scriptManager: ScriptManager) {
+		super();
+		this.scriptManager = scriptManager;
+	}
+
+	public listenEvent() {
+		this.listenerMessage(ToolsConnectVSCode, this.connectVSCode);
+		this.listenerMessage(ToolsDisconnecttVSCode, this.connectVSCode);
+	}
+
+	public connectVSCode(url: string) {
+		return new Promise(resolve => {
+			// 与vsc扩展建立连接
+			if (this.wsc) {
+				this.wsc.close();
+			}
+			try {
+				this.wsc = new WebSocket(url);
+			} catch (e: any) {
+				return resolve(e.message);
+			}
+			this.wsc.addEventListener('open', (ev) => {
+				this.wsc!.send('Hello Server!');
+				resolve(true);
+			});
+
+			// Listen for messages
+			this.wsc.addEventListener('message', async (ev) => {
+				let data = JSON.parse(ev.data);
+				switch (data.action) {
+					case 'onchange': {
+						let code = data.data.script;
+						let [newScript, oldScript] = await this.scriptController.prepareScriptByCode(code, "");
+						if (typeof oldScript === "string") {
+							return;
+						}
+						if (oldScript) {
+							this.scriptManager.scriptReinstall(newScript!);
+						} else {
+							this.scriptManager.scriptInstall(newScript!);
+						}
+						break;
+					}
+				}
+			});
+
+			this.wsc.addEventListener('error', (ev) => {
+				resolve('ws服务连接失败');
+			});
+		});
+	}
+
+	public disconnectVSCode() {
+		return new Promise(resolve => {
+			if (this.wsc) {
+				this.wsc.close();
+				this.wsc = undefined;
+			}
+			resolve(true);
+		});
+	}
+
+}

src/background.ts

@@ -13,6 +13,7 @@ import { get } from "./pkg/utils";
 import { Server } from "./apps/config";
 import { Subscribe, SUBSCRIBE_STATUS_ENABLE } from "./model/do/subscribe";
 import { UserManager } from "./apps/user/manager";
+import { ToolsManager } from "./apps/tools/manager";
 
 migrate();
 
@@ -35,6 +36,7 @@ chrome.contextMenus.create({
 
 let scripts = new ScriptManager();
 let user = new UserManager();
+let tools = new ToolsManager(scripts);
 let grant = BackgroundGrant.SingleInstance(
     scripts,
     new MultiGrantListener(new bgGrantListener(), new grantListener(<Window>sandbox.window)),
@@ -46,6 +48,8 @@ scripts.listenScriptMath();
 
 user.listenEvent();
 
+tools.listenEvent();
+
 grant.listenScriptGrant();
 window.addEventListener("message", (event) => {
     if (event.data.action != Logger) {

src/pkg/apps/manager.ts

@@ -0,0 +1,15 @@
+import { MessageCallback, MsgCenter } from "@App/apps/msg-center/msg-center";
+
+export class Manager {
+
+	public listenerMessage(topic: string, callback: MessageCallback) {
+		MsgCenter.listenerMessage(topic, async (body, send, sender) => {
+			let ret = <any>callback.call(this, body, send, sender)
+			if (ret instanceof Promise) {
+				ret = await ret;
+			}
+			send(ret);
+		});
+	}
+
+}

src/pkg/config.ts

@@ -78,6 +78,13 @@ export class SystemConfig {
         this.set("update_disable_script", enable);
     }
 
+    public static get vscode_url(): string {
+        return this.cache.get('vscode_url') || 'ws://localhost:8642';
+    }
+
+    public static set vscode_url(val: string) {
+        this.set("vscode_url", val);
+    }
 }
 
 SystemConfig.storage = new ChromeStorage("system");

src/views/components/Panels.vue

@@ -50,7 +50,12 @@
             >
           </div>
           <div v-else-if="val.type == 'text'">
-            {{ val.content }}
+            <v-text-field
+              v-model="val.value"
+              @blur="val.change(val)"
+              :label="val.title"
+              :hint="val.describe"
+            ></v-text-field>
           </div>
         </div>
       </v-expansion-panel-content>
@@ -62,6 +67,26 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
 
+export interface ConfigItem {
+  type: "text" | "button" | "check" | "select";
+  title: string;
+  describe?: string;
+  color?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  click?: any;
+  value?: any;
+  change?: any;
+}
+
+export interface ConfigGroup {
+  items: ConfigItem[];
+}
+
+export interface PanelConfigs {
+  [key: string]: ConfigGroup;
+}
+
 @Component({})
 export default class Panels extends Vue {
   panel = [0, 1, 2, 3];

src/views/pages/Option/tabs/Tools.vue

@@ -13,22 +13,28 @@
 <script lang="ts">
 import { ScriptController } from "@App/apps/script/controller";
 import { Vue, Component } from "vue-property-decorator";
-import Panels from "@App/views/components/Panels.vue";
+import Panels, {
+  ConfigItem,
+  PanelConfigs,
+} from "@App/views/components/Panels.vue";
 import { saveAs } from "file-saver";
 import { File, Resource, Script, Subscribe } from "@App/model/do/back";
 import { SCRIPT_STATUS_ENABLE } from "@App/model/do/script";
 import { strToBase64 } from "@App/pkg/utils";
 import { SUBSCRIBE_STATUS_ENABLE } from "@App/model/do/subscribe";
+import { ToolsController } from "@App/apps/tools/controller";
+import { SystemConfig } from "@App/pkg/config";
 
 @Component({
   components: { Panels },
 })
 export default class Tools extends Vue {
   scriptCtl = new ScriptController();
+  toolsCtrl = new ToolsController();
 
   panel = [0, 1, 2, 3];
 
-  configs = {
+  configs: PanelConfigs = {
     备份: {
       items: [
         {
@@ -49,6 +55,27 @@ export default class Tools extends Vue {
         },
       ],
     },
+    开发调试: {
+      items: [
+        {
+          type: "text",
+          title: "VSCode地址",
+          describe: "连接地址,默认一般为: ws://localhost:8642",
+          value: SystemConfig.vscode_url,
+          loading: false,
+          disabled: false,
+          change(val: ConfigItem) {
+            SystemConfig.vscode_url = val.value;
+          },
+        },
+        {
+          type: "button",
+          title: "连接",
+          color: "blue-grey",
+          click: this.connectVScode,
+        },
+      ],
+    },
   };
 
   importFileChange(ev: Event) {
@@ -198,5 +225,20 @@ export default class Tools extends Vue {
         return "o" + JSON.stringify(val);
     }
   }
+
+  async connectVScode(val: ConfigItem) {
+    val.loading = true;
+    val.disabled = true;
+    let ret = await this.toolsCtrl.connectVScode(
+      this.configs.开发调试.items[0].value!
+    );
+    if (typeof ret === "string") {
+      alert(ret);
+    } else {
+      alert("连接成功");
+    }
+    val.loading = false;
+    val.disabled = false;
+  }
 }
 </script>