2

enter image description here

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"
  }
}
sparkle
  • 7,530
  • 22
  • 69
  • 131
  • have you tried reinstalling/updating the beta devtools? current version is [6.0.0 beta 7](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) – wittgenstein Mar 29 '21 at 10:00
  • Yes, I am running the latest. Restarted chrome too. – sparkle Mar 29 '21 at 10:02
  • maybe updating vue itself would help. you are in beta mode with `^3.0.0-beta.1`?! – wittgenstein Mar 29 '21 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 Mar 29 '21 at 10:08
  • could you remove `-beta.1` and run again? Maybe try Firefox otherwise, sry. – wittgenstein Mar 29 '21 at 10:16
  • Content scripts run in an "isolated world" so Vue Devtools can't access it. Either inject in the [page itself](/a/9517879) or debug your app on a dummy localhost page. – wOxxOm Mar 29 '21 at 10:54

1 Answers1

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
sparkle
  • 7,530
  • 22
  • 69
  • 131