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"
  }
}

have you tried reinstalling/updating the beta devtools? current version is 6.0.0 beta 7 — wittgenstein
– wittgenstein, Commented Mar 29, 2021 at 10:00
maybe updating vue itself would help. you are in beta mode with ^3.0.0-beta.1?! — wittgenstein
– wittgenstein, Commented Mar 29, 2021 at 10:05
I have run "vue upgrade" but still got ""vue": "^3.0.0-beta.1"". vue --version -> @vue/cli 4.5.12 — sparkle
– sparkle, Commented Mar 29, 2021 at 10:08
could you remove -beta.1 and run again? Maybe try Firefox otherwise, sry. — wittgenstein
– wittgenstein, Commented Mar 29, 2021 at 10:16

sparkle · Accepted Answer · 2021-03-29 13:23:00Z

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

answered Mar 29, 2021 at 13:23

sparkle

7,41824 gold badges78 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related