diff --git a/shells/chrome/icons/128.nuxt.png b/shells/chrome/icons/128.nuxt.png new file mode 100644 index 000000000..f724834a7 Binary files /dev/null and b/shells/chrome/icons/128.nuxt.png differ diff --git a/shells/chrome/icons/16.nuxt.png b/shells/chrome/icons/16.nuxt.png new file mode 100644 index 000000000..2d8238bf2 Binary files /dev/null and b/shells/chrome/icons/16.nuxt.png differ diff --git a/shells/chrome/icons/48.nuxt.png b/shells/chrome/icons/48.nuxt.png new file mode 100644 index 000000000..c58e11f9e Binary files /dev/null and b/shells/chrome/icons/48.nuxt.png differ diff --git a/shells/chrome/popups/disabled.nuxt.html b/shells/chrome/popups/disabled.nuxt.html new file mode 100644 index 000000000..ba136c694 --- /dev/null +++ b/shells/chrome/popups/disabled.nuxt.html @@ -0,0 +1,6 @@ + +
+ 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. +
diff --git a/shells/chrome/popups/enabled.nuxt.html b/shells/chrome/popups/enabled.nuxt.html new file mode 100644 index 000000000..b5ddf29fb --- /dev/null +++ b/shells/chrome/popups/enabled.nuxt.html @@ -0,0 +1,5 @@ + ++ Nuxt.js + Vue.js is detected on this page. + Open DevTools and look for the Vue panel. +
diff --git a/shells/chrome/src/background.js b/shells/chrome/src/background.js index bd84ed777..d9fd2a061 100644 --- a/shells/chrome/src/background.js +++ b/shells/chrome/src/background.js @@ -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` }) } }) diff --git a/shells/chrome/src/detector.js b/shells/chrome/src/detector.js index 419c9a90c..c39efa562 100644 --- a/shells/chrome/src/detector.js +++ b/shells/chrome/src/detector.js @@ -8,6 +8,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++) {