search

adambullmer / vue-cli-plugin-browser-extension

Browser extension development plugin for vue-cli 3.0
GNU Lesser General Public License v3.0
427 stars 76 forks source link

MV3 live reload not working on chrome-extension://jxxxxxxxxxxxxxxxxxxxk/popup.html #142

Open sherifmayika opened 2 years ago

sherifmayika commented 2 years ago

Describe the bug I have big extension a crm project that use Vuetify and fire base. I was able to get live reload work on MV2 on BG, content scrips and popup (extension page in my case) after moving to MV3 everything works smoothly except chrome-extension://jxxxxxxxxxxxxxxxxxxxk/popup.html and background script not reloading on code save.

I used github:awardx/vue-extension-mv3-hot-reload to move to MV3

Screenshots If applicable, add screenshots to help explain your problem.

Reproducible Example If possible, add a link to a repository/branch where the issue is currently happening.

Name Version
vue-cli-plugin-browser-extension 0.25.2
Operating System linux arch
Node 16.2.0
NPM/Yarn 7.15.1
vue-cli 5.0.8
vue-cli-service
browser chrome latest

Additional context package.json, 

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service build  --mode development --watch",
     "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.24.1",
    "css-loader": "^4.3.0",
    "date-fns": "^2.22.1",
    "firebase": "^8.2.4",
    "font-awesome": "^4.7.0",
    "js-cookie": "^2.2.1",
    "material-design-icons-iconfont": "^6.1.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "vue": "^2.7.8",
    "vue-emoji-picker": "^1.0.3",
    "vue-jsonp": "^2.0.0",
    "vue-moment": "^4.1.0",
    "vue-mv3-hot-reload": "github:awardx/vue-extension-mv3-hot-reload",
    "vue-router": "^3.5.1",
    "vue-sortable": "^0.1.3",
    "vue-toastification": "^1.7.14",
    "vue2-google-maps": "^0.10.7",
    "vuedraggable": "^2.24.3",
    "vuetify": "^2.6.9",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.7",
    "@vue/cli-plugin-eslint": "~4.5.7",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.7",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.10.0",
    "eslint-plugin-vue": "^7.0.1",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "vue-cli-plugin-browser-extension": "latest",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.7.8",
    "vuetify-loader": "^1.9.2",
    "webpack-extension-reloader": "^1.1.4"
  }
}

vue.config.js 

 configureWebpack: {
    devtool: 'source-map',
  },

mv - csp 

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline'; connect-src https://* data: blob: filesystem: ws://localhost:9090/"
  },

folks, Please help