feat: remove umi socket dom

@@ -28,10 +28,11 @@
           v-if="DEVELOPER_MODE == 1 && filterDebuggerApps.length"
           @click="end"
         >
-          <VideoPause
-            style="width: 1em; height: 1em; margin-right: 8px"
-          />关闭调试</el-button
-        >
+          <VideoPause style="width: 1em; height: 1em; margin-right: 8px" />
+          <el-tooltip content="关闭调试模式，会同步关闭开发者模式" placement="">
+            关闭调试
+          </el-tooltip>
+        </el-button>
         <el-button v-else @click="start"
           ><VideoPlay style="width: 1em; height: 1em; margin-right: 8px" />
           开启调试</el-button
@@ -42,19 +43,19 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed } from "vue";
+import { reactive, ref, computed, watchEffect } from "vue";
 
 const { sessionStorage } =
   chrome.extension.getBackgroundPage().backgroundState || {};
 
-const defaultApps = '[{"name":"","entry":""}]';
+const defaultApps = [{ name: "", entry: "" }];
 
 const sessionDebuggerApps = JSON.parse(
-  sessionStorage.QX_DEBUG_APPS || defaultApps
+  sessionStorage.QX_DEBUG_APPS || JSON.stringify(defaultApps)
 );
 
 const QX_DEBUG_APPS = reactive(
-  JSON.parse(sessionDebuggerApps.length ? sessionDebuggerApps : defaultApps)
+  sessionDebuggerApps.length ? sessionDebuggerApps : defaultApps
 );
 
 const filterDebuggerApps = computed(() =>

@@ -3,11 +3,14 @@
 </template>
 
 <script setup>
+import { onMounted } from "vue";
+
 const DEVELOPER_MODE = window.sessionStorage.getItem("DEVELOPER_MODE") === "1";
 const QX_DEBUG_APPS = JSON.parse(
   window.sessionStorage.getItem("QX_DEBUG_APPS") || "[]"
 );
 const text = DEVELOPER_MODE && QX_DEBUG_APPS.length ? "调试中" : "开发模式";
+
 const style = {
   background:
     "linear-gradient(to right, rgba(62, 142, 245, 0.6), rgb(62, 142, 245))",
@@ -26,6 +29,42 @@ const style = {
   cursor: "default",
   boxShadow: "rgba(62, 142, 245, 0.2) 0px 0px 5px",
 };
+
+function callback(mutationList, observer) {
+  mutationList.forEach((mutation) => {
+    switch (mutation.type) {
+      case "childList":
+        /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
+           mutation.removedNodes */
+        console.log("mutation", mutation);
+        const nodes = mutation.addedNodes;
+        nodes.forEach((node) => {
+          if (
+            (node.innerText =
+              "Disconnected from the devServer, trying to reconnect...")
+          ) {
+            node.parentNode.removeChild(node);
+          }
+        });
+        break;
+      case "attributes":
+        /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
+           该属性之前的值为 mutation.oldValue */
+        break;
+    }
+  });
+}
+
+onMounted(() => {
+  var targetNode = document.body;
+  var observerOptions = {
+    childList: true, // 观察目标子节点的变化，是否有添加或者删除
+    attributes: true, // 观察属性变动
+    subtree: false, // 观察后代节点，默认为 false
+  };
+  var observer = new MutationObserver(callback);
+  observer.observe(targetNode, observerOptions);
+});
 </script>
 
 <style>

@@ -2,11 +2,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 
 const DEVELOPER_MODE = window.sessionStorage.getItem("DEVELOPER_MODE") === "1";
-const QX_DEBUG_APPS = JSON.parse(
-  window.sessionStorage.getItem("QX_DEBUG_APPS") || "[]"
-);
 
-if (DEVELOPER_MODE || QX_DEBUG_APPS.length) {
+if (DEVELOPER_MODE) {
   const app = createApp(App);
 
   const injectBody = document.createElement("div");