// This is the devtools script, which is called when the user opens the // Chrome devtool on a page. We check to see if we global hook has detected // Vue presence on the page. If yes, create the Vue panel; otherwise poll // for 10 seconds. let created = false let checkCount = 0 chrome.devtools.network.onNavigated.addListener(createPanelIfHasVue) const checkVueInterval = setInterval(createPanelIfHasVue, 1000) createPanelIfHasVue() function createPanelIfHasVue() { if (created || checkCount++ > 10) { clearInterval(checkVueInterval) return } chrome.devtools.inspectedWindow.eval( '!!(window.__VUE_DEVTOOLS_GLOBAL_HOOK__ && (window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue || window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.length))', (hasVue) => { if (!hasVue || created) { return } clearInterval(checkVueInterval) created = true chrome.devtools.panels.create( 'Vue', 'icons/128.png', 'devtools.html', (panel) => { // panel loaded panel.onShown.addListener(onPanelShown) panel.onHidden.addListener(onPanelHidden) }, ) }, ) } // Manage panel visibility function onPanelShown() { chrome.runtime.sendMessage('vue-panel-shown') } function onPanelHidden() { chrome.runtime.sendMessage('vue-panel-hidden') }