adambullmer / vue-cli-plugin-browser-extension Goto Github PK

The extension I created using this plugin is working fine in the development mode, however, when I do yarn build and load up the unpacked into the Chrome extensions, it does not work anymore! I get no error anywhere, but I can not see any of my background.js cosole.logs! Any idea where should I start to dig in order to fix it?

Proposal
Since the community has taken some steps to make this a more browser agnostic extension tool, I want to kill the option for including the polyfill and just always include it (and use the auto-include polyfill). For the users who want to make chrome only extensions, that is still possible as the polyfill doesn't remove or disable the chrome object.

Benefit
This will simplify the docs, templates, and initial options as everything can be written consistently. While it does increase the file size of the end distributable (20.5kb unminified), in the presence of the large iconigraphy, Vue as a framework, and other libraries being included this should not be the main focus point of where to trim a few kbs. If after all that, someone needs to trim it down and doesn't want the polyfill, it is now removable since it has been added to the webpack chain.

vue.config.js

module.exports = {
  chainWebpack(config) {
    config.plugins.delete('provide-webextension-polyfill');
    config.module.rules.delete('provide-webextension-polyfill');
  }
}

• copy a root key.pem file into the dist folder's root
• add *.pem to the .gitignore list (just in case)
• scaffold with a key-pair: https://stackoverflow.com/a/46739698/1883547
• embed .pem into manifest for dev builds

If the polyfill will be auto included, it does not need to be included in the parent as it will be included in the plugin's dependency tree.

I've installed the plugin (v0.22.5) on the fresh setup of Vue CLI and the serve command builds the files successfully. The extension loads and displays
[ WER: Connected to Extension Hot Reloader ] but code in content-script or background is not being executed.
Surprisingly, when I build the extension and load it, everything works fine! Something to do it Extension Hot Reloader?

I'm trying to edit the content_security_policy but I see that this plugin is was setting its own, only during development, with unsafe-eval, I guess for the purposes of HMR or sourcemap eval?

Is is currently possible to set a custom content_security_policy in such a way that unsafe-eval is removed in production?

Thanks!

I just tried to setup a project with vue cli 4 and I got as far as generating the right output files with npm run serve and npm run build.

However the chrome extension logs several error messages:

1. found unexpected key 'browser_style'
   "options_ui": { "page": "options.html", "browser_style": true },

2. Uncaught SyntaxError: missing ) after argument list
   js/popup.js:1209 (anonymous function)

3. Uncaught SyntaxError: missing ) after argument list
   js/background.js:1209 (anonymous function)

4. Uncaught (in promise) [object Object]
   js/chunk-vendors.cb8df399.js:7 (anonymous function)

The project is an empty setup with vue cli 4, including vuex and eslint.
In development mode the popup doesn't display anything, while the build files will display the helloworld component in the popup.

Fully scaffold the app to have a reasonable example for how an application structure may look, including typescript, vuex, and vue-router.

Might also want to include a monorepo setup where other build targets such as web or electron are also included to show how this could all be put into harmony.

I like the way this repo solves some of the single pipeline for cross-browser challenges. For example:

• Create an output per browser
• Use an ENV var to specify which browser is the target for a single build, and make a convenience build job to iterate over each vendor.
• Exposing which browser is being built in process.env so that developers can do specific things per target, and let tree-shaking and dead code deletion optimizations take over
• Allowing for tagging manifest keys as for specific browser (vendor) targets: __chrome|opera__key,
  • I think I would prefer inverting the targets so that it becomes more readable which
    it actually is: description__chrome|opera__
  • Could use the WebextensionPlugin if I don't invert the vendor and key syntax.
• Conditional inclusion of the browser polyfill to further reduce bundle size in browsers that don't need it

When key.pem file is not present, we get this warning.

No `key.pem` file detected. This is problematic only if you are publishing an existing extension`

However, if user has specified key in manifest.json this is not required.

The hot reloading seems to work when using the popup, but i can't get it to work with content scripts. I always need to manually reload the extension, any known solutions?

EDIT: Clicked enter too early, didn't add a description.

Hi, i'm having an issue with getting the npm run serve with the live reload server to work.

Whenever I run npm run serve i'm consistently getting:

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::9090

The only way to remediate i've been able to remediate this issue was:

1. Comment out the line which contains webpackConfig.plugins.push(new ChromeExtensionReloader({ entries })) in the vue-cli-plugin-browser-extension/index.js file.
2. Run npm run serve
3. Cancel the process.
4. Uncomment out the changes I made in step 1.
5. Run npm run serve

Some more info:

• Node version: v8.11.3
• NPM version: 5.6.0
• OS: macOS High Sierra 10.13.6
• Project Dependencies and versions:

  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-airbnb": "^3.0.0",
    "vue-cli-plugin-browser-extension": "^0.11.0",
    "vue-template-compiler": "^2.5.17"
  },

I've added a console.trace() into the vue-cli-plugin-browser-extension/index.js file, inside the api.configureWebpack function and the outputs i'm getting (in order), are the following:

Output 1:

⠋  Building for development...
[object Object]
    at api.configureWebpack (/Users/kory/Publift/publift-chrome-extension/node_modules/vue-cli-plugin-browser-extension/index.js:35:13)
    at webpackRawConfigFns.forEach.fn (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/Service.js:227:21)
    at Array.forEach (<anonymous>)
    at Service.resolveWebpackConfig (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/Service.js:224:30)
    at PluginAPI.resolveWebpackConfig (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/PluginAPI.js:115:25)
    at module.exports (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:34:25)
    at build (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/commands/build/index.js:124:50)
    at api.registerCommand (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/commands/build/index.js:72:13)
    at Service.run (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/Service.js:207:12)
    at Object.<anonymous> (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/bin/vue-cli-service.js:22:9)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)

Output 2

⠴  Building for development...
[object Object]
    at api.configureWebpack (/Users/kory/Publift/publift-chrome-extension/node_modules/vue-cli-plugin-browser-extension/index.js:35:13)
    at webpackRawConfigFns.forEach.fn (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/Service.js:227:21)
    at Array.forEach (<anonymous>)
    at Service.resolveWebpackConfig (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/lib/Service.js:224:30)
    at Object.<anonymous> (/Users/kory/Publift/publift-chrome-extension/node_modules/@vue/cli-service/webpack.config.js:12:26)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.exports.resolve (/Users/kory/Publift/publift-chrome-extension/node_modules/eslint-import-resolver-webpack/index.js:69:25)
    at v2 (/Users/kory/Publift/publift-chrome-extension/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/kory/Publift/publift-chrome-extension/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/kory/Publift/publift-chrome-extension/node_modules/eslint-module-utils/resolve.js:116:22)

Let me know if there is anything else I can provide, would really like to get this working.

I am using typescript.
Does it support typescript?

Thank you.

Live reload support for extension pages, like popup and options page, was released in webpack-extension-reloader v1.1.1

This ticket is for adding the extension pages to the webpack-extension-reloader.options.entries.extensionPage option, and updating the docs where it says live reload is not possible on these pages.

The google extension has multiple content entries and customization pages, it also has a popup and background script. So the output size is too large, I want to split chunks to reduce size of the bundle script, then I adjust vue.config.js:

configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  },
  pages: {
    'popup/popup': {
      entry: 'src/popup/popup.js',
      title: 'Shop Eden',
      chunks: ['vendors', 'popup/popup']
    }
 }

Then the pages, popup scripts is ok, but the background and content scripts doesn't work, How to support split chunks feature for all scripts? (only chainWebpack?)

I don't see it anymore in template, is there a reason for that?
Would not be a good move to pre-create an icons folder like it's done here ?

I think it would be nice to pre-create it, because it will prevent some errors about not existing icon when loading extension into browser. 👍

Thanks for your time

yarn build was working for me, but it stopped working just today for some reason. I am getting the following error:

 error

Cannot convert undefined or null to object

 error  in css/[name].[contenthash:8].css

Path variable [contenthash:8] not implemented in this context: css/[name].[contenthash:8].css

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't know if this is in your plugin or vue-cli or where the problem is.

Mixed use of underscores and dashes. Is this intentional? /content_scripts/content-script.js

What about renaming content/content.js?

New and existing projects get this error when selecting the background or content scripts options during the generator prompts.

TypeError: Cannot read property 'background' of undefined
TypeError: Cannot read property 'contentScripts' of undefined

Probably shouldn't have been so opinionated on this one, and will resolve the issues from #18 . Would be good to have an example repo with links in the README to show how those (and other base options) would fit into the ecosystem.

Initial scaffold appends the plugin gitignore entries to the end of the file. If you later run vue invoke browser-extension those same entries will be duplicated at the end of the file.

yarn build --mode=staging produces an incomplete background.js file in the zipped artifact.

$ yarn build --mode=staging
yarn run v1.19.2
$ vue-cli-service build --mode=staging

⠙  Building for staging...[WER-W1] function(obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += 'Warning, Extension Reloader Plugin was not enabled! It runs only on webpack --mode=development (v4 or more) or with NODE_ENV=development (lower versions)';

}
return __p
}.
Visit https://github.com/rubenspgcavalcante/webpack-extension-reloader/wiki/General-Information#WER-W1 for complete details

⠸  Building for staging... WARN  No key.pem file found. This is fine for dev, however you may have problems publishing without one
⠴  Building for staging...

 WARNING  Compiled with 3 warnings                                                                11:47:57 AM

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.js (2.14 MiB)
  ../artifacts/extension-v1.3.18-staging.zip (794 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  popup (2.27 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      css/popup.css
      js/popup.js
  options (2.26 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      css/options.css
      js/options.js
  standalone (2.3 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      css/standalone.css
      js/standalone.js
  background (2.26 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      js/background.js
  content_scripts/content (2.26 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      js/content_scripts/content.js
  console (2.26 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/chunk-common.css
      js/chunk-common.js
      js/console.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                  Size               Gzipped

  dist/js/chunk-vendors.js              2190.61 KiB        601.70 KiB
  dist/EBML.js                          237.93 KiB         54.33 KiB
  dist/js/chunk-common.js               71.10 KiB          19.42 KiB
  dist/js/standalone.js                 45.53 KiB          14.01 KiB
  dist/js/popup.js                      18.61 KiB          6.54 KiB
  dist/js/background.js                 17.24 KiB          6.86 KiB
  dist/js/options.js                    11.44 KiB          4.64 KiB
  dist/js/console.js                    10.11 KiB          4.04 KiB
  dist/js/content_scripts/content.js    8.91 KiB           3.61 KiB
  dist/css/chunk-vendors.css            36.43 KiB          7.18 KiB
  dist/css/chunk-common.css             3.63 KiB           1.17 KiB
  dist/css/standalone.css               3.13 KiB           1.04 KiB
  dist/css/popup.css                    1.01 KiB           0.44 KiB
  dist/css/options.css                  0.50 KiB           0.26 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

	pluginOptions: {
		browserExtension: {
			modesToZip: ['production', 'staging'],
			components: {
				background: true,
				popup: true,
				options: true,
				contentScripts: true,
				standalone: true,
			},
			componentOptions: {
				background: {
					entry: 'src/background.js',
				},
				contentScripts: {
					entries: {
						'content_scripts/content': 'src/content_scripts/content.js',
						console: 'src/content_scripts/console.js',
					},
				},
			},
		},
	},

Related: vuejs/vue-cli#4197

One way of fixing this would be to use the filename option, or to place the flatten the structure at build time.

From vue cli 3 docs, about modern mode:

With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers.

I think this feature is quite useful for development of browser extensions, since we can use there the latest es6 features without fear to break something. Moreover, we can get smaller bundle size and better browser performance.

Expected behaviour

Following vue cli 3 command should work:

vue-cli-service build --modern

What is actually happening?

When I install browser-extension plugin the command above fails.

Error output

ERROR  TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
    at /home/kryvonos_v/projects/hello-world/node_modules/vue-cli-plugin-browser-extension/index.js:112:14
    at Object.tap (/home/kryvonos_v/projects/hello-world/node_modules/webpack-chain/src/Plugin.js:24:24)
    at /home/kryvonos_v/projects/hello-world/node_modules/vue-cli-plugin-browser-extension/index.js:111:34
    at /home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/Service.js:242:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/Service.js:242:26)
    at PluginAPI.resolveChainableWebpackConfig (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/PluginAPI.js:151:25)
    at module.exports (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:2:22)
    at build (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/commands/build/index.js:146:50)
    at /home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/commands/build/index.js:58:15
    at Service.run (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/lib/Service.js:236:12)
    at Object.<anonymous> (/home/kryvonos_v/projects/hello-world/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)

is ctrl+c not the proper way to kill the process?
edit:
looks like its with webpack-extension-reloader: rubenspgcavalcante/webpack-extension-reloader#30

Is it possible to have locales support?

I think it needs to add an extra CopyWebpackPlugin usage for _locales folder and maybe an extra check for pluginOptions.manifestSync.includes('default_locale').

Awesome plugin, thank you!

Using any combination of version and description, no properties are being synced to the manifest.json file.

App fails to load in firefox, works okay in chrome.

In firefox console,
getting chrome is not defined

Uncaught (in promise) Objectmessage: "Could not establish connection. Receiving end does not exist."get message: ƒ ()arguments: (...)caller: (...)length: 0name: ""proto: ƒ ()[[Scopes]]: Scopes[0]proto: Object

i have a fresh vue cli install plus a fresh vue-cli-plugin-browser-extension install and get this error on serve.

I believe some relatively small-scale projects would not require Vue-Router or Vuex for popup and options pages. It could be great to add some options, which ask users whether to install Vue-Router or Vuex for popup or options (or both) pages, in installing prompts. This could help developers to decrease the total size of extension if the project does not need those unnecessary plugins.

errors reading from the consuming project's package.json

Is HMR supposed to be working? Not working in the options page for me. Thanks!

Manifest is being generated with this plugin's version, and not the consuming application's version.

Hi!

Is there any plan for supporting https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools in the near future ?

Thanks for the good job !

According to the Vue CLI docs, "staging" and other production-like envs can be used by setting the mode to staging, and setting NODE_ENV=production.

Currently vue-cli-plugin-browser-extension relies on mode being 'production' or in adding other modes to pluginOptions.browserExtension.modesToZip.

Perhaps it would make more sense to rely on NODE_ENV=production so that the plugin works like Vue CLI.

After run:
$ vue create .
$ vue add browser-extension

$ yarn run serve
Error:

> vue-cli-service build --mode development --watch
⠇  Bui 98% after emitting SizeLimitsPlugin
                              
ERROR  Failed to compile with 1 errors                                                                                                                                                        error  Unexpected string in JSON at position 723

p/s: package.json

{
  "name": "extension_init",
  "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",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "webextension-polyfill": "^0.3.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-plugin-pwa": "^3.9.0",
    "@vue/cli-plugin-unit-mocha": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "imports-loader": "^0.8.0",
    "vue-cli-plugin-browser-extension": "^0.15.1",
    "vue-template-compiler": "^2.6.10"
  }
}

Could you fix this?
Thank you.

Consider using the same scaffold template for each of the webpage components (popup, devtools, options, override, standalone), since their scaffold target is the only thing that changes.

Also maybe only reuse the default index.html file instead of a new entry html file by default. It's likely that the base entrypoint won't change much between these implementation, other than the webpack output, so maybe it makes sense to not force the user into duplicate code out of the box.

I created a local branch for override support, would be good to integrate this in

  if (options.components.override) {
    api.render('./template/override', { name, ...options })

    pkg.vue.pages['override/override'] = {
      entry: 'src/override/override.js',
      title: 'Override'
    }
  }

 <%_ if (options.components.override) { -%>
  "chrome_url_overrides": {
      "<%- options.components.overrideOption || 'newtab' %>": "override/override.html"
    }
  <%_
  } -%>

I have a web project where I use VueCLI and now want to develop a supporting chrome extension. I want to reuse the Vue components in extension and so I need to add this plugin under the same setup. The current plugin modifies the default entry files and thus my default setup stops building. Do we have a workaround where we add new cli-service command instead of making changes in default settings?

So scripts in package.json can be something like this:

"extension:build": "vue-cli-service extension-build",
"extension:serve": "vue-cli-service extension-build --mode development --watch",

The vue-cli-plugin-electron-builder does something like this without touching existing commands.

Hello,
I'm starting to use this plugin for a chrome extension and noticed that the @click event doesn't trigger in the options page components, but works fine in the popup page. Also if I set to not open the embedded way using open_in_tab = true it works.

Is there a way to make the @click trigger when open_in_tab = false? This is the default behavior if nothing is changed after installing this plugin.

The generated background script logs Hello undefined! instead of Hello bar! if the plugin is installed into a project where the user installed Vuex on project creation.

This is because Vue CLI generates a store.js file and since the background script imports ./store, Webpack imports store.js instead of store/index.js.

Really weird, this was working fine last night, and now all of a sudden i rerun and get this with the error with popup.js -> App.vue ->router-view, in my devtools inspector
Failed to mount component: template or render function not defined.

Looks like it loads the code because the PageIndex mounted gets called, but it fails to render the template, bewildered by this

Live reloading capabilities are mentioned a few times in the README, however this plugin does not support HMR.

It would be helpful if the distinction was made, and to know what live reload means exactly, in the context of the browser extension.

Thanks!

Related:

• #36
• #40

Webpack currently shows a message like the following when building a project for production:

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  ../dist-zip/<project-name>-v<version>.zip (945 KiB)

I don't think this message is relevant and if possible should be hidden.

On a new project, selecting the content script option during generation, the content-script option is missing from manifest.json.

https://github.com/reproducing/vue-cli-plugin-browser-extension-manifest-content-script/blob/master/src/manifest.json

EDIT: there is also some indentation issue in this line

The popup.html file is being generated with unnecessary boilerplate. Should remove the css and js links from the template as they will get generated and added at build time

https://cli.vuejs.org/config/#filenamehashing works normally for multipage applications, however with this plugin installed, it doesn't work anymore for scripts defined in the pages option in vue.config.js.