From 5755fb06ff8fbb6285b5bdd6588c82d5b474a159 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 31 Oct 2024 01:00:53 +0800
Subject: [PATCH] feat(extension): vue2 migration guide popup page

---
 packages/chrome-extension/popups/popup.css    | 11 ++++++++++
 .../popups/vue2-migration-guide.html          | 21 +++++++++++++++++++
 packages/chrome-extension/src/background.ts   |  7 +++++++
 packages/chrome-extension/src/detector.ts     | 19 ++++++++++++++---
 packages/devtools-kit/src/core/index.ts       | 12 ++++++-----
 packages/firefox-extension/popups/popup.css   | 11 ++++++++++
 .../popups/vue2-migration-guide.html          | 21 +++++++++++++++++++
 packages/firefox-extension/src/background.ts  |  7 +++++++
 packages/firefox-extension/src/detector.ts    | 19 ++++++++++++++---
 9 files changed, 117 insertions(+), 11 deletions(-)
 create mode 100644 packages/chrome-extension/popups/vue2-migration-guide.html
 create mode 100644 packages/firefox-extension/popups/vue2-migration-guide.html

diff --git a/packages/chrome-extension/popups/popup.css b/packages/chrome-extension/popups/popup.css
index 8f59e2824..ce8ca103f 100644
--- a/packages/chrome-extension/popups/popup.css
+++ b/packages/chrome-extension/popups/popup.css
@@ -45,3 +45,14 @@ a {
   margin-right: 24px;
   box-shadow: 0 0 15px rgb(0 0 0 / 10%);
 }
+
+.migration-guide {
+  width: 300px;
+  margin: 0;
+  padding: 0;
+}
+
+.migration-guide h2 {
+  padding: 8px 0;
+  margin: 0;
+}
diff --git a/packages/chrome-extension/popups/vue2-migration-guide.html b/packages/chrome-extension/popups/vue2-migration-guide.html
new file mode 100644
index 000000000..0d479a32e
--- /dev/null
+++ b/packages/chrome-extension/popups/vue2-migration-guide.html
@@ -0,0 +1,21 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="migration-guide">
+  <h2>Migration Tips</h2>
+  <p style="text-indent: 8px">
+    Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.
+  </p>
+  <p style="text-indent: 8px">
+    The legacy version that supports both Vue 2 and Vue 3 has been moved to
+    <a target="_blank" href="https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp"
+      >here</a
+    >, please install and enable only the legacy version for your Vue2 app. If you're still using v5 version, you can
+    install it
+    <a
+      target="_blank"
+      href="https://chromewebstore.google.com/detail/vuejs-devtools-v5/hkddcnbhifppgmfgflgaelippbigjpjo"
+      >here</a
+    >.
+  </p>
+</div>
diff --git a/packages/chrome-extension/src/background.ts b/packages/chrome-extension/src/background.ts
index 21e0fbd90..3f7ed8529 100644
--- a/packages/chrome-extension/src/background.ts
+++ b/packages/chrome-extension/src/background.ts
@@ -89,6 +89,13 @@ chrome.runtime.onConnect.addListener((port) => {
 })
 
 chrome.runtime.onMessage.addListener((req, sender) => {
+  if (sender.tab && req.vue2Detected) {
+    chrome.action.setPopup({
+      tabId: sender.tab.id,
+      popup: chrome.runtime.getURL('popups/vue2-migration-guide.html'),
+    })
+  }
+
   if (sender.tab && req.vueDetected) {
     let suffix = ''
 
diff --git a/packages/chrome-extension/src/detector.ts b/packages/chrome-extension/src/detector.ts
index aa0a953f6..c8f99f035 100644
--- a/packages/chrome-extension/src/detector.ts
+++ b/packages/chrome-extension/src/detector.ts
@@ -11,7 +11,20 @@ function detect(win: Window) {
   }
 
   function runDetect() {
-    // 1. check Nuxt
+    // 1. check Vue2
+    // @ts-expect-error skip type check
+    if (window.__VUE_DEVTOOLS_VUE2_APP_DETECTED__) {
+      sendMessage({
+        devtoolsEnabled: false,
+        vueDetected: false,
+        nuxtDetected: false,
+        vue2Detected: true,
+        vitePluginDetected: false,
+        vitePluginClientUrl: '',
+      })
+    }
+
+    // 2. check Nuxt
     // @ts-expect-error types
     const nuxtDetected = !!(window.__NUXT__)
 
@@ -26,7 +39,7 @@ function detect(win: Window) {
       return
     }
 
-    // 2. check VitePress
+    // 3. check VitePress
     // @ts-expect-error types
     const vitePressDetected = !!(window.__VITEPRESS__)
     if (vitePressDetected) {
@@ -40,7 +53,7 @@ function detect(win: Window) {
       return
     }
 
-    // 3. check Vue
+    // 4. check Vue
     // @ts-expect-error types
     const vueDetected = !!(window.__VUE__)
     if (vueDetected) {
diff --git a/packages/devtools-kit/src/core/index.ts b/packages/devtools-kit/src/core/index.ts
index 1911e05da..9f861e91d 100644
--- a/packages/devtools-kit/src/core/index.ts
+++ b/packages/devtools-kit/src/core/index.ts
@@ -47,16 +47,18 @@ export function initDevTools() {
   // @ts-expect-error skip type check
   // Vue2 app detection
   target.__VUE_DEVTOOLS_GLOBAL_HOOK__.once('init', (Vue) => {
-    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
+    target.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true
 
-    console.log('%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.', 'font-bold: 700; font-size: 16px;')
+    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 600; font-size: 16px;')
+
+    console.log('%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.', 'font-bold: 500; font-size: 14px;')
 
     const url = 'https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp'
-    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, 'font-size: 16px;', 'text-decoration: underline; cursor: pointer;font-size: 16px;')
+    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, 'font-size: 14px;', 'text-decoration: underline; cursor: pointer;font-size: 14px;')
 
-    console.log('%cPlease install and enable only the legacy version for your Vue2 app.', 'font-bold: 700; font-size: 16px;')
+    console.log('%cPlease install and enable only the legacy version for your Vue2 app.', 'font-bold: 500; font-size: 14px;')
 
-    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
+    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 600; font-size: 16px;')
   })
 
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
diff --git a/packages/firefox-extension/popups/popup.css b/packages/firefox-extension/popups/popup.css
index 8f59e2824..ce8ca103f 100644
--- a/packages/firefox-extension/popups/popup.css
+++ b/packages/firefox-extension/popups/popup.css
@@ -45,3 +45,14 @@ a {
   margin-right: 24px;
   box-shadow: 0 0 15px rgb(0 0 0 / 10%);
 }
+
+.migration-guide {
+  width: 300px;
+  margin: 0;
+  padding: 0;
+}
+
+.migration-guide h2 {
+  padding: 8px 0;
+  margin: 0;
+}
diff --git a/packages/firefox-extension/popups/vue2-migration-guide.html b/packages/firefox-extension/popups/vue2-migration-guide.html
new file mode 100644
index 000000000..0d479a32e
--- /dev/null
+++ b/packages/firefox-extension/popups/vue2-migration-guide.html
@@ -0,0 +1,21 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="migration-guide">
+  <h2>Migration Tips</h2>
+  <p style="text-indent: 8px">
+    Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.
+  </p>
+  <p style="text-indent: 8px">
+    The legacy version that supports both Vue 2 and Vue 3 has been moved to
+    <a target="_blank" href="https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp"
+      >here</a
+    >, please install and enable only the legacy version for your Vue2 app. If you're still using v5 version, you can
+    install it
+    <a
+      target="_blank"
+      href="https://chromewebstore.google.com/detail/vuejs-devtools-v5/hkddcnbhifppgmfgflgaelippbigjpjo"
+      >here</a
+    >.
+  </p>
+</div>
diff --git a/packages/firefox-extension/src/background.ts b/packages/firefox-extension/src/background.ts
index e165aa13e..df93ec3aa 100644
--- a/packages/firefox-extension/src/background.ts
+++ b/packages/firefox-extension/src/background.ts
@@ -87,6 +87,13 @@ chrome.runtime.onConnect.addListener((port) => {
 })
 
 chrome.runtime.onMessage.addListener((req, sender) => {
+  if (sender.tab && req.vue2Detected) {
+    chrome.browserAction.setPopup({
+      tabId: sender.tab.id,
+      popup: 'popups/vue2-migration-guide.html',
+    })
+  }
+
   if (sender.tab && req.vueDetected) {
     let suffix = ''
 
diff --git a/packages/firefox-extension/src/detector.ts b/packages/firefox-extension/src/detector.ts
index aa0a953f6..c8f99f035 100644
--- a/packages/firefox-extension/src/detector.ts
+++ b/packages/firefox-extension/src/detector.ts
@@ -11,7 +11,20 @@ function detect(win: Window) {
   }
 
   function runDetect() {
-    // 1. check Nuxt
+    // 1. check Vue2
+    // @ts-expect-error skip type check
+    if (window.__VUE_DEVTOOLS_VUE2_APP_DETECTED__) {
+      sendMessage({
+        devtoolsEnabled: false,
+        vueDetected: false,
+        nuxtDetected: false,
+        vue2Detected: true,
+        vitePluginDetected: false,
+        vitePluginClientUrl: '',
+      })
+    }
+
+    // 2. check Nuxt
     // @ts-expect-error types
     const nuxtDetected = !!(window.__NUXT__)
 
@@ -26,7 +39,7 @@ function detect(win: Window) {
       return
     }
 
-    // 2. check VitePress
+    // 3. check VitePress
     // @ts-expect-error types
     const vitePressDetected = !!(window.__VITEPRESS__)
     if (vitePressDetected) {
@@ -40,7 +53,7 @@ function detect(win: Window) {
       return
     }
 
-    // 3. check Vue
+    // 4. check Vue
     // @ts-expect-error types
     const vueDetected = !!(window.__VUE__)
     if (vueDetected) {