feat(extension): add VitePress detector (#523)

Author: yuyinws

packages/chrome-extension/icons/128.vitepress.png

@@ -0,0 +1,8 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<p>
+  <strong>VitePress + Vue.js is detected on this page.</strong><br />
+  Devtools inspection is not available because it's in production mode or
+  explicitly disabled by the author.
+</p>

packages/chrome-extension/icons/16.vitepress.png

@@ -0,0 +1,23 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot" />
+  </div>
+
+  <div>
+    <p>
+      <strong>VitePress + Vue.js is detected on this page.</strong><br />
+      Open DevTools and look for the Vue panel.
+    </p>
+
+    <p>
+      <a
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
+        target="_blank"
+        >Troubleshooting</a
+      >
+    </p>
+  </div>
+</div>

packages/chrome-extension/icons/48.vitepress.png

@@ -90,7 +90,12 @@ chrome.runtime.onConnect.addListener((port) => {
 
 chrome.runtime.onMessage.addListener((req, sender) => {
   if (sender.tab && req.vueDetected) {
-    const suffix = req.nuxtDetected ? '.nuxt' : ''
+    let suffix = ''
+
+    if (req.nuxtDetected)
+      suffix = '.nuxt'
+    else if (req.vitePressDetected)
+      suffix = '.vitepress'
 
     chrome.action.setIcon({
       tabId: sender.tab.id,

packages/chrome-extension/popups/disabled.vitepress.html

@@ -26,7 +26,21 @@ function detect(win: Window) {
       return
     }
 
-    // 2. check Vue
+    // 2. check VitePress
+    // @ts-expect-error types
+    const vitePressDetected = !!(window.__VITEPRESS__)
+    if (vitePressDetected) {
+      sendMessage({
+        devtoolsEnabled: window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled,
+        vueDetected: true,
+        vitePressDetected: true,
+        vitePluginDetected: !!window.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__,
+        vitePluginClientUrl: window.__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__,
+      })
+      return
+    }
+
+    // 3. check Vue
     // @ts-expect-error types
     const vueDetected = !!(window.__VUE__)
     if (vueDetected) {

packages/chrome-extension/popups/enabled.vitepress.html

@@ -0,0 +1,8 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<p>
+  <strong>VitePress + Vue.js is detected on this page.</strong><br />
+  Devtools inspection is not available because it's in production mode or
+  explicitly disabled by the author.
+</p>

packages/chrome-extension/src/background.ts

@@ -0,0 +1,23 @@
+<meta charset="utf-8" />
+<link rel="stylesheet" type="text/css" href="./popup.css" />
+
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot" />
+  </div>
+
+  <div>
+    <p>
+      <strong>VitePress + Vue.js is detected on this page.</strong><br />
+      Open DevTools and look for the Vue panel.
+    </p>
+
+    <p>
+      <a
+        href="https://devtools-next.vuejs.org/help/troubleshooting"
+        target="_blank"
+        >Troubleshooting</a
+      >
+    </p>
+  </div>
+</div>

packages/chrome-extension/src/detector.ts

@@ -88,7 +88,12 @@ chrome.runtime.onConnect.addListener((port) => {
 
 chrome.runtime.onMessage.addListener((req, sender) => {
   if (sender.tab && req.vueDetected) {
-    const suffix = req.nuxtDetected ? '.nuxt' : ''
+    let suffix = ''
+
+    if (req.nuxtDetected)
+      suffix = '.nuxt'
+    else if (req.vitePressDetected)
+      suffix = '.vitepress'
 
     chrome.browserAction.setIcon({
       tabId: sender.tab.id,