backend.js

// this is injected to the app page when the panel is activated.

import { initBackend } from '@back'
import { Bridge } from '@vue-devtools/shared-utils'

window.addEventListener('message', handshake)

function sendListening() {
  window.postMessage({
    source: 'vue-devtools-backend-injection',
    payload: 'listening',
  }, '*')
}
sendListening()

function handshake(e) {
  if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
    window.removeEventListener('message', handshake)

    let listeners = []
    const bridge = new Bridge({
      listen(fn) {
        const listener = (evt) => {
          if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
            fn(evt.data.payload)
          }
        }
        window.addEventListener('message', listener)
        listeners.push(listener)
      },
      send(data) {
        // if (process.env.NODE_ENV !== 'production') {
        //   console.log('[chrome] backend -> devtools', data)
        // }
        window.postMessage({
          source: 'vue-devtools-backend',
          payload: data,
        }, '*')
      },
    })

    bridge.on('shutdown', () => {
      listeners.forEach((l) => {
        window.removeEventListener('message', l)
      })
      listeners = []
      window.addEventListener('message', handshake)
    })

    initBackend(bridge)
  }
  else if (e.data.source !== 'vue-devtools-backend-injection') {
    sendListening()
  }
}