feat: detect Nuxt.js

shells/chrome/popups/disabled.nuxt.html

@@ -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/popups/enabled.nuxt.html

@@ -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/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`
  })
  }
 })

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++) {