feat(extension): vue2 migration guide popup page (#658)

vuejs · Oct 30, 2024 · 813ffbd · 813ffbd
1 parent 82509c9
commit 813ffbd
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {