feat: inject

-chrome.runtime.sendMessage({ type: 'sessionStorage', value: window.sessionStorage });
+chrome.runtime.sendMessage({
+  type: "sessionStorage",
+  value: window.sessionStorage,
+});
 
 
 chrome.runtime.onMessage.addListener((res) => {
 chrome.runtime.onMessage.addListener((res) => {
   const { type } = res;
   const { type } = res;
@@ -13,10 +16,24 @@ chrome.runtime.onMessage.addListener((res) => {
       window.location.reload();
       window.location.reload();
       break;
       break;
     case "getLocalStorage":
     case "getLocalStorage":
-      chrome.runtime.sendMessage(window.sessionStorage)
+      chrome.runtime.sendMessage(window.sessionStorage);
       break;
       break;
     default:
     default:
       return;
       return;
   }
   }
 });
 });
 
 
+function injectCustomJs(jsPath) {
+  jsPath = jsPath || "inject.js";
+  var temp = document.createElement("script");
+  temp.setAttribute("type", "module");
+  temp.setAttribute("data-namespace", "qx-developer-tool-inject");
+  temp.src = chrome.extension.getURL(jsPath);
+  temp.onload = function () {
+    // 放在页面不好看，执行完后移除掉
+    // this.parentNode.removeChild(this);
+  };
+  document.body.appendChild(temp);
+}
+
+injectCustomJs();

@@ -21,10 +21,13 @@
         </template>
         </template>
       </div>
       </div>
       <div class="btn">
       <div class="btn">
-        <el-button @click="start"
+        <el-button @click="start(true)"
           ><Refresh style="width: 1em; height: 1em" />
           ><Refresh style="width: 1em; height: 1em" />
         </el-button>
         </el-button>
-        <el-button v-if="DEVELOPER_MODE == 1" @click="end">
+        <el-button
+          v-if="DEVELOPER_MODE == 1 && filterDebuggerApps.length"
+          @click="end"
+        >
           <VideoPause
           <VideoPause
             style="width: 1em; height: 1em; margin-right: 8px"
             style="width: 1em; height: 1em; margin-right: 8px"
           />关闭调试</el-button
           />关闭调试</el-button
@@ -39,23 +42,29 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, computed } from "vue";
 
 
 const { sessionStorage } =
 const { sessionStorage } =
   chrome.extension.getBackgroundPage().backgroundState || {};
   chrome.extension.getBackgroundPage().backgroundState || {};
 
 
+const defaultApps = '[{"name":"","entry":""}]';
+
+const sessionDebuggerApps = JSON.parse(
+  sessionStorage.QX_DEBUG_APPS || defaultApps
+);
+
 const QX_DEBUG_APPS = reactive(
 const QX_DEBUG_APPS = reactive(
-  JSON.parse(sessionStorage.QX_DEBUG_APPS || '[{"name":"","entry":""}]')
+  JSON.parse(sessionDebuggerApps.length ? sessionDebuggerApps : defaultApps)
+);
+
+const filterDebuggerApps = computed(() =>
+  QX_DEBUG_APPS.filter((item) => item.name && item.entry)
 );
 );
 
 
 const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
 const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
 
 
 console.log("sessionStorage", sessionStorage);
 console.log("sessionStorage", sessionStorage);
 
 
-const bg = chrome.extension.getBackgroundPage();
-
-const { tabs } = bg.chrome || {};
-
 function add() {
 function add() {
   QX_DEBUG_APPS.push({ name: "", entry: "" });
   QX_DEBUG_APPS.push({ name: "", entry: "" });
 }
 }
@@ -68,10 +77,8 @@ function deleteItem(index) {
   }
   }
 }
 }
 
 
-function validate() {
-  const apps = QX_DEBUG_APPS.filter((item) => item.name && item.entry);
-
-  if (apps.length) {
+function validate(refresh) {
+  if (filterDebuggerApps.value.length || refresh) {
     return true;
     return true;
   }
   }
 
 
@@ -79,18 +86,15 @@ function validate() {
 }
 }
 
 
 async function save() {
 async function save() {
-  const apps = QX_DEBUG_APPS.filter((item) => item.name && item.entry);
-  console.log("QX_DEBUG_APPS", QX_DEBUG_APPS, apps);
-
   chrome.runtime.sendMessage({
   chrome.runtime.sendMessage({
     type: "setSessionStorage",
     type: "setSessionStorage",
     key: "QX_DEBUG_APPS",
     key: "QX_DEBUG_APPS",
-    value: JSON.stringify(apps),
+    value: JSON.stringify(filterDebuggerApps.value),
   });
   });
 }
 }
 
 
-async function start() {
-  if (validate()) {
+async function start(refresh) {
+  if (validate(refresh)) {
     DEVELOPER_MODE.value = "1";
     DEVELOPER_MODE.value = "1";
     save();
     save();
     chrome.runtime.sendMessage({
     chrome.runtime.sendMessage({

@@ -9,7 +9,5 @@
   </head>
   </head>
   <body id="app">
   <body id="app">
   </body>
   </body>
-
-  
 </html>
 </html>
 
 

+<template>
+  <div class="inject-content" :style="style">{{ text }}</div>
+</template>
+
+<script setup>
+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))",
+  width: "26px",
+  padding: "10px",
+  position: "absolute",
+  right: "0",
+  top: "calc(100vh / 2 - 50px)",
+  zIndex: 9999,
+  display: "flex",
+  alignItem: "center",
+  justifyContent: "center",
+  lineHeight: "18px",
+  color: "rgb(255, 255, 255)",
+  borderRadius: "6px 0px 0px 6px",
+  cursor: "default",
+  boxShadow: "rgba(62, 142, 245, 0.2) 0px 0px 5px",
+};
+</script>
+
+<style>
+</style>

+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) {
+  const app = createApp(App);
+
+  const injectBody = document.createElement("div");
+
+  injectBody.setAttribute("data-namespace", "inject-body");
+  injectBody.setAttribute("id", "inject-body");
+
+  document.body.appendChild(injectBody);
+
+  app.mount(injectBody);
+}

@@ -28,5 +28,6 @@
   "browser_action": {
   "browser_action": {
     "default_popup": "src/popup/index.html"
     "default_popup": "src/popup/index.html"
   },
   },
+  "web_accessible_resources": ["inject.js", "inject.*.css", "index.*.js", "runtime-dom.esm-bundler.*.js"],
   "icons": { "16": "logo.png", "48": "logo.png", "128": "logo.png" }
   "icons": { "16": "logo.png", "48": "logo.png", "128": "logo.png" }
 }
 }

@@ -20,6 +20,7 @@ export default defineConfig({
       input: [
       input: [
         "src/popup/index.html",
         "src/popup/index.html",
         "src/devtool/index.html",
         "src/devtool/index.html",
+        "src/inject/inject.js",
         "src/background.js",
         "src/background.js",
         "src/content-script.js",
         "src/content-script.js",
       ],
       ],