make sure contextmenu item is only shown when Vue devtools is active

Author: yyx990803

shells/chrome/manifest.json

@@ -32,6 +32,7 @@
     "http://*/*",
     "https://*/*",
     "file:///*",
+    "tabs",
     "contextMenus"
   ],
 

shells/chrome/src/background.js

@@ -68,10 +68,12 @@ function doublePipe (id, one, two) {
     one.disconnect()
     two.disconnect()
     ports[id] = null
+    updateContextMenuItem()
   }
   one.onDisconnect.addListener(shutdown)
   two.onDisconnect.addListener(shutdown)
   console.log('tab ' + id + ' connected.')
+  updateContextMenuItem()
 }
 
 chrome.runtime.onMessage.addListener((req, sender) => {
@@ -92,13 +94,24 @@ chrome.runtime.onMessage.addListener((req, sender) => {
 })
 
 // Right-click inspect context menu entry
-
-chrome.contextMenus.create({
-  id: 'vue-inspect-instance',
-  title: 'Inspect Vue component',
-  contexts: ['all']
+let activeTabId
+chrome.tabs.onActivated.addListener(({ tabId }) => {
+  activeTabId = tabId
+  updateContextMenuItem()
 })
 
+function updateContextMenuItem () {
+  if (ports[activeTabId]) {
+    chrome.contextMenus.create({
+      id: 'vue-inspect-instance',
+      title: 'Inspect Vue component',
+      contexts: ['all']
+    })
+  } else {
+    chrome.contextMenus.remove('vue-inspect-instance')
+  }
+}
+
 chrome.contextMenus.onClicked.addListener((info, tab) => {
   chrome.runtime.sendMessage({
     vueContextMenu: {