田强 / QxDeveloperTool · Commits

Commit 0dc82bc2c04b508c9588ecf3081fabd764c2698d

Authored by 田强
1 parent 5e7c4924

feat: inject

Inline Side-by-side
Showing 7 changed files with 95 additions and 22 deletions
1   -chrome.runtime.sendMessage({ type: 'sessionStorage', value: window.sessionStorage });
  1 +chrome.runtime.sendMessage({
  2 + type: "sessionStorage",
  3 + value: window.sessionStorage,
  4 +});
2 5
3 6 chrome.runtime.onMessage.addListener((res) => {
4 7 const { type } = res;
... ... @@ -13,10 +16,24 @@ chrome.runtime.onMessage.addListener((res) => {
13 16 window.location.reload();
14 17 break;
15 18 case "getLocalStorage":
16   - chrome.runtime.sendMessage(window.sessionStorage)
  19 + chrome.runtime.sendMessage(window.sessionStorage);
17 20 break;
18 21 default:
19 22 return;
20 23 }
21 24 });
22 25
  26 +function injectCustomJs(jsPath) {
  27 + jsPath = jsPath || "inject.js";
  28 + var temp = document.createElement("script");
  29 + temp.setAttribute("type", "module");
  30 + temp.setAttribute("data-namespace", "qx-developer-tool-inject");
  31 + temp.src = chrome.extension.getURL(jsPath);
  32 + temp.onload = function () {
  33 + // 放在页面不好看，执行完后移除掉
  34 + // this.parentNode.removeChild(this);
  35 + };
  36 + document.body.appendChild(temp);
  37 +}
  38 +
  39 +injectCustomJs();
... ...
... ... @@ -21,10 +21,13 @@
21 21 </template>
22 22 </div>
23 23 <div class="btn">
24   - <el-button @click="start"
  24 + <el-button @click="start(true)"
25 25 ><Refresh style="width: 1em; height: 1em" />
26 26 </el-button>
27   - <el-button v-if="DEVELOPER_MODE == 1" @click="end">
  27 + <el-button
  28 + v-if="DEVELOPER_MODE == 1 && filterDebuggerApps.length"
  29 + @click="end"
  30 + >
28 31 <VideoPause
29 32 style="width: 1em; height: 1em; margin-right: 8px"
30 33 />关闭调试</el-button
... ... @@ -39,23 +42,29 @@
39 42 </template>
40 43
41 44 <script setup>
42   -import { reactive, ref } from "vue";
  45 +import { reactive, ref, computed } from "vue";
43 46
44 47 const { sessionStorage } =
45 48 chrome.extension.getBackgroundPage().backgroundState || {};
46 49
  50 +const defaultApps = '[{"name":"","entry":""}]';
  51 +
  52 +const sessionDebuggerApps = JSON.parse(
  53 + sessionStorage.QX_DEBUG_APPS || defaultApps
  54 +);
  55 +
47 56 const QX_DEBUG_APPS = reactive(
48   - JSON.parse(sessionStorage.QX_DEBUG_APPS || '[{"name":"","entry":""}]')
  57 + JSON.parse(sessionDebuggerApps.length ? sessionDebuggerApps : defaultApps)
  58 +);
  59 +
  60 +const filterDebuggerApps = computed(() =>
  61 + QX_DEBUG_APPS.filter((item) => item.name && item.entry)
49 62 );
50 63
51 64 const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
52 65
53 66 console.log("sessionStorage", sessionStorage);
54 67
55   -const bg = chrome.extension.getBackgroundPage();
56   -
57   -const { tabs } = bg.chrome || {};
58   -
59 68 function add() {
60 69 QX_DEBUG_APPS.push({ name: "", entry: "" });
61 70 }
... ... @@ -68,10 +77,8 @@ function deleteItem(index) {
68 77 }
69 78 }
70 79
71   -function validate() {
72   - const apps = QX_DEBUG_APPS.filter((item) => item.name && item.entry);
73   -
74   - if (apps.length) {
  80 +function validate(refresh) {
  81 + if (filterDebuggerApps.value.length || refresh) {
75 82 return true;
76 83 }
77 84
... ... @@ -79,18 +86,15 @@ function validate() {
79 86 }
80 87
81 88 async function save() {
82   - const apps = QX_DEBUG_APPS.filter((item) => item.name && item.entry);
83   - console.log("QX_DEBUG_APPS", QX_DEBUG_APPS, apps);
84   -
85 89 chrome.runtime.sendMessage({
86 90 type: "setSessionStorage",
87 91 key: "QX_DEBUG_APPS",
88   - value: JSON.stringify(apps),
  92 + value: JSON.stringify(filterDebuggerApps.value),
89 93 });
90 94 }
91 95
92   -async function start() {
93   - if (validate()) {
  96 +async function start(refresh) {
  97 + if (validate(refresh)) {
94 98 DEVELOPER_MODE.value = "1";
95 99 save();
96 100 chrome.runtime.sendMessage({
... ...
... ... @@ -9,7 +9,5 @@
9 9 </head>
10 10 <body id="app">
11 11 </body>
12   -
13   -
14 12 </html>
15 13
... ...
  1 +<template>
  2 + <div class="inject-content" :style="style">{{ text }}</div>
  3 +</template>
  4 +
  5 +<script setup>
  6 +const DEVELOPER_MODE = window.sessionStorage.getItem("DEVELOPER_MODE") === "1";
  7 +const QX_DEBUG_APPS = JSON.parse(
  8 + window.sessionStorage.getItem("QX_DEBUG_APPS") || "[]"
  9 +);
  10 +const text = DEVELOPER_MODE && QX_DEBUG_APPS.length ? "调试中" : "开发模式";
  11 +const style = {
  12 + background:
  13 + "linear-gradient(to right, rgba(62, 142, 245, 0.6), rgb(62, 142, 245))",
  14 + width: "26px",
  15 + padding: "10px",
  16 + position: "absolute",
  17 + right: "0",
  18 + top: "calc(100vh / 2 - 50px)",
  19 + zIndex: 9999,
  20 + display: "flex",
  21 + alignItem: "center",
  22 + justifyContent: "center",
  23 + lineHeight: "18px",
  24 + color: "rgb(255, 255, 255)",
  25 + borderRadius: "6px 0px 0px 6px",
  26 + cursor: "default",
  27 + boxShadow: "rgba(62, 142, 245, 0.2) 0px 0px 5px",
  28 +};
  29 +</script>
  30 +
  31 +<style>
  32 +</style>
... ...
  1 +import { createApp } from "vue";
  2 +import App from "./App.vue";
  3 +
  4 +const DEVELOPER_MODE = window.sessionStorage.getItem("DEVELOPER_MODE") === "1";
  5 +const QX_DEBUG_APPS = JSON.parse(
  6 + window.sessionStorage.getItem("QX_DEBUG_APPS") || "[]"
  7 +);
  8 +
  9 +if (DEVELOPER_MODE || QX_DEBUG_APPS.length) {
  10 + const app = createApp(App);
  11 +
  12 + const injectBody = document.createElement("div");
  13 +
  14 + injectBody.setAttribute("data-namespace", "inject-body");
  15 + injectBody.setAttribute("id", "inject-body");
  16 +
  17 + document.body.appendChild(injectBody);
  18 +
  19 + app.mount(injectBody);
  20 +}
... ...
... ... @@ -28,5 +28,6 @@
28 28 "browser_action": {
29 29 "default_popup": "src/popup/index.html"
30 30 },
  31 + "web_accessible_resources": ["inject.js", "inject.*.css", "index.*.js", "runtime-dom.esm-bundler.*.js"],
31 32 "icons": { "16": "logo.png", "48": "logo.png", "128": "logo.png" }
32 33 }
... ...
... ... @@ -20,6 +20,7 @@ export default defineConfig({
20 20 input: [
21 21 "src/popup/index.html",
22 22 "src/devtool/index.html",
  23 + "src/inject/inject.js",
23 24 "src/background.js",
24 25 "src/content-script.js",
25 26 ],
... ...