feat: detect Nuxt.js (#661)

* feat: add chrome shell icons for nuxt.js

* feat: add chrome popups for nuxt.js

* feat: support icon/popup suffix

* feat(chrome/detector): add nuxt detector

Author: pi0

shells/chrome/icons/128.nuxt.png

@@ -0,0 +1,6 @@
+<meta charset="utf-8">
+<p style="width: 200px">
+  Nuxt.js + Vue.js is detected on this page.
+  Devtools inspection is not available because it's in
+  production mode or explicitly disabled by the author.
+</p>

shells/chrome/icons/16.nuxt.png

@@ -0,0 +1,5 @@
+<meta charset="utf-8">
+<p style="width: 180px;">
+  Nuxt.js + Vue.js is detected on this page.
+  Open DevTools and look for the Vue panel.
+</p>

shells/chrome/icons/48.nuxt.png

@@ -78,17 +78,19 @@ function doublePipe (id, one, two) {
 
 chrome.runtime.onMessage.addListener((req, sender) => {
   if (sender.tab && req.vueDetected) {
+    const suffix = req.nuxtDetected ? '.nuxt' : ''
+
     chrome.browserAction.setIcon({
       tabId: sender.tab.id,
       path: {
-        16: 'icons/16.png',
-        48: 'icons/48.png',
-        128: 'icons/128.png'
+        16: `icons/16${suffix}.png`,
+        48: `icons/48${suffix}.png`,
+        128: `icons/128${suffix}.png`
       }
     })
     chrome.browserAction.setPopup({
       tabId: sender.tab.id,
-      popup: req.devtoolsEnabled ? 'popups/enabled.html' : 'popups/disabled.html'
+      popup: req.devtoolsEnabled ? `popups/enabled${suffix}.html` : `popups/disabled${suffix}.html`
     })
   }
 })

shells/chrome/popups/disabled.nuxt.html

@@ -9,6 +9,26 @@ window.addEventListener('message', e => {
 
 function detect (win) {
   setTimeout(() => {
+    // Method 1: Check Nuxt.js
+    const nuxtDetected = Boolean(window.__NUXT__ || window.$nuxt)
+
+    if (nuxtDetected) {
+      let Vue
+
+      if (window.$nuxt) {
+        Vue = window.$nuxt.$root.constructor
+      }
+
+      win.postMessage({
+        devtoolsEnabled: Vue && Vue.config.devtools,
+        vueDetected: true,
+        nuxtDetected: true
+      }, '*')
+
+      return
+    }
+
+    // Method 2: Scan all elements inside document
     const all = document.querySelectorAll('*')
     let el
     for (let i = 0; i < all.length; i++) {