adambullmer / vue-cli-plugin-browser-extension Goto Github PK
View Code? Open in Web Editor NEWBrowser extension development plugin for vue-cli 3.0
License: GNU Lesser General Public License v3.0
Browser extension development plugin for vue-cli 3.0
License: GNU Lesser General Public License v3.0
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.log
s! 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');
}
}
:~/DEV/EXTENSIONs$ vue add browser-extension
📦 Installing vue-cli-plugin-browser-extension...
+ [email protected]
updated 1 package and audited 21654 packages in 5.184s
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-browser-extension
ERROR Error: package.json not found in /home/lsoave/DEV/EXTENSIONs
Error: package.json not found in /home/lsoave/DEV/EXTENSIONs
at getPkg (/usr/local/share/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:44:11)
at invoke (/usr/local/share/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:55:15)
at module.exports.args (/usr/local/share/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:188:10)
at add (/usr/local/share/.config/yarn/global/node_modules/@vue/cli/lib/add.js:37:5)
at processTicksAndRejections (internal/process/task_queues.js:86:5)
key.pem
file into the dist folder's root*.pem
to the .gitignore
list (just in case).pem
into manifest for dev buildsIf 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:
found unexpected key 'browser_style'
"options_ui": { "page": "options.html", "browser_style": true },
Uncaught SyntaxError: missing ) after argument list
js/popup.js:1209 (anonymous function)
Uncaught SyntaxError: missing ) after argument list
js/background.js:1209 (anonymous function)
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:
process.env
so that developers can do specific things per target, and let tree-shaking and dead code deletion optimizations take over__chrome|opera__key
,
description__chrome|opera__
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:
webpackConfig.plugins.push(new ChromeExtensionReloader({ entries }))
in the vue-cli-plugin-browser-extension/index.js
file.npm run serve
npm run serve
"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.
Following vue cli 3 command should work:
vue-cli-service build --modern
When I install browser-extension
plugin the command above fails.
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.
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.