Vue.js devtools not detected for a Chrome Extension build in Vue.js

Question

I have build a Vue 3 app injected using a content script of a Chrome extension but the Vue.js app is not detected from devtools (beta and stable version).

I tried all the following:

• Allow Access to file URLs in chrome://extensions/ -> Vue Devtools

vue.config.js

  module.exports = {
  filenameHashing: false,
  pages: {
    popup: {
      template: 'public/browser-extension.html',
      entry: './src/popup/main.js',
      title: 'Popup'
    },
    options: {
      template: 'public/browser-extension.html',
      entry: './src/options/main.js',
      title: 'Options'
    }
  },
  pluginOptions: {
    browserExtension: {
      components: {
        background: true,
        contentScripts: true
      },

      componentOptions: {
        contentScripts: {
          entries: {
            "page": 'src/content-scripts/page.js',
            "results": 'src/content-scripts/results.js',
          },
        },
      },

      manifestTransformer: (manifest) => {
        delete manifest.content_security_policy // This is for Chrome Manifest V3 compatibility
        return manifest;
      }

    }
  },
  configureWebpack: {
    devtool: "true",
  }
}

package.json

{
"scripts": {
    "serve": "vue-cli-service build --mode development --watch",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9",
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.6",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-browser-extension": "latest",
    "vue-cli-plugin-tailwind": "~2.0.6",
    "webpack-extension-reloader": "^1.1.4"
  }
}

Answer 1

SOLVED

Using the Vuejs dev tools electron app

npm install --save-dev @vue/devtools

added in content-script.js

import devtools from '@vue/devtools'
if (process.env.NODE_ENV === 'development') {
  devtools.connect()
}

then run

vue-devtools