Vue.js Vue.js 中的 Chrome 扩展构建未检测到 devtools

Question

我已经构建了一个使用 Chrome 扩展的内容脚本注入的 Vue 3 应用程序，但未从 devtools（测试版和稳定版）检测到 Vue.js 应用程序。

我尝试了以下所有方法：

允许访问 chrome://extensions/ -> Vue Devtools 中的文件 URL

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

已解决

使用 Vuejs dev tools electron app

npm install --save-dev @vue/devtools

添加内容-script.js

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

然后运行

vue-devtools

Vue.js Vue.js 中的 Chrome 扩展构建未检测到 devtools

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

google-chrome-extension

vue.js

vuejs3