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

Build Manifesto.json file missing fields #79

Open adrielwerlich opened 4 years ago

adrielwerlich commented 4 years ago

Describe the bug

While trying to load the 'build' directory file into the chrome extension plugin management was showing the following errors:

1- Location used, but default_locale was not specified in the manifest 2- version key,value pair missing

In order to solve this I had to manually copy the original manifesto.json file of the 'src' folder into the 'build' folder

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Automated build manifesto.json missing keys image

Should have "version": "2.0" and "default_locale": "en" key,value pairs

image

Is there a way to simply copy the original manifest file into the 'build' directory withouth modifications?

adambullmer commented 4 years ago

Is there a way to simply copy the original manifest file into the 'build' directory withouth modifications?

As it operates today, it should be syncing the version (and optionally description with a settings override) field from your package.json file into the manifest so that you shouldn't have to keep those in sync manually. The only other field that the build process messes with is the content-script policies, to make sure that unsafe-eval exists in dev builds and not in production builds to ensure a better local development experience.

The package.json version and description fields sync can be disabled by setting the manifestSync plugin option to an empty array, but you will need to provide those fields manually in the src/manifest.json file. Any other modification you make to the src/manifest.json file should get copied over without being touched by the build process.

Darkylin commented 4 years ago

Same issue. Add code below to the vue.config.js solved my problem.

chainWebpack(webpackConfig) {
    webpackConfig.plugin('copy-manifest').tap(args => {
      args[0][0].force = true
      return args
    })
  }
adambullmer commented 4 years ago

@Darkylin did you change the manifestSync option and do you have a version field in your package.json

jciruolo commented 4 years ago

I came here running into the same problem. For reference, I generated a new project with @vue/cli (4.3.1) and I added this extension with vue add browser-extension (version 0.24.0).

After running npm run serve, the dev server starts successfully but after compiling the dist/manifest.json file is missing the default_locale field as @adrielwerlich mentioned. All I see is:

{
  "name": "test-project",
  "short_name": "test-project",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

To try and help with debugging, I also tried setting manifestSync to [] and defining the version and description fields manually. This exhibits the same behavior as before - a manifest file in the dist folder that doesn't match the manifest in my src folder.

@Darkylin's workaround works for me on the first build every time. However, if I make a change in another file that will cause a reload in development mode (such as src/popup/App.vue), the manifest.json is overwritten with the content that i pasted above.

Happy to help with any more context if needed.

Darkylin commented 4 years ago

@Darkylin did you change the manifestSync option and do you have a version field in your package.json

Sorry, I had changed my project to electron application and remove this cli plugin. And this bug cannot be reproduced after I create another new project.

DitheringIdiot commented 4 years ago

I'm pretty sure this is conflict with the PWA module. The PWA module also creates a manifest.json file. I just removed the PWA module and the web extension manifest worked.

npm uninstall @vue/cli-plugin-pwa --save

or

yarn remove @vue/cli-plugin-pwa

of course if you want to use the PWA module then this isn't going to work for you.