Gathering detailed insights and metrics for @lulibuli/vue-cli-plugin-browser-extension
Gathering detailed insights and metrics for @lulibuli/vue-cli-plugin-browser-extension
Browser extension development plugin for vue-cli 3.0
0.26.2
LGPL-3.0
JavaScript
1.12 MB
Installations
npm install @lulibuli/vue-cli-plugin-browser-extensionDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.15.1
NPM Version
8.19.2
Releases
Unable to fetch releases
Languages
3
JavaScript
Vue
HTML
JavaScript (90.59%)
Vue (7.64%)
HTML (1.77%)
Developer
almog-geva
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
LGPL-3.0 License
223 Commits
1 Branches
1 Contributors
Updated on Nov 09, 2022
Maintainers
1
Package Meta Information
Latest Version
0.26.2
Package Id
@lulibuli/vue-cli-plugin-browser-extension@0.26.2
Unpacked Size
1.12 MB
Size
1.08 MB
File Count
42
NPM Version
8.19.2
Node Version
16.15.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
vue-cli-plugin-browser-extension
Browser extension development plugin for vue-cli 5.x (With Webpack 5)
What does it do?
This is intended to be a vue-cli@3.x replacement for Kocal/vue-web-extension v1 (now, Kocal/vue-web-extension is a preset using this plugin).
This plugin changes the serve command for your vue applications.
This new command is only for running a livereload server while testing out your browser extension.
This removes the entrypoint of src/main.js, and as such will not scaffold a general vue app.
Packaging and deploying will still be done with yarn build and zipping in up for Chrome, Firefox, or whichever other browser you wish to develop for.
It makes some assumptions about your project setup. I hope to be able to scaffold an app so that identifying the below in unnecessary.
.
├── public/
│ ├── _locales/
│ │ └── en/
│ │ └── messages.json
│ ├── icons/
│ │ └── Icons for your extension. Should include a 16, 19, 38, 48, and 128px square image
│ └── browser-extension.html (default target html template)
├── src/
│ ├── assets/
│ │ └── Static assets in use in your app, like logo.png
│ ├── components/
│ │ └── HelloWorld.vue (modified)
│ ├── content-scripts
│ │ └── content-script.js
│ ├── devtools/ (asked during project generation)
│ │ ├── App.vue
│ │ └── main.js
│ ├── options/ (asked during project generation)
│ │ ├── App.vue
│ │ └── main.js
│ ├── popup/ (asked during project generation)
│ │ ├── App.vue
│ │ └── main.js
│ ├── override/ (asked during project generation)
│ │ ├── App.vue
│ │ └── main.js
│ └── standalone/ (asked during project generation)
│ ├── App.vue
│ └── main.js
├── background.js
└── manifest.json
System Dependencies
If you wish to use the signing key functionality you will need to have openssl available on your system.
Adding to your project
This can be added to your vuejs project by one of the following methods:
- Using the
vue uiand searching for this project - Using the vue cli
vue add browser-extensioncommand
Usage
Running the Livereload server.
This will build and write to the local dist directory.
This plugin will respect the outputDir setting, however it cannot read into passed CLI args, so if you require a custom output dir, be sure to add it in your vue.config.js file.
You can then add this as an unpacked plugin to your browser, and will continue to update as you make changes.
NOTE: you cannot get HMR support in the popup window, however, closing and reopening will refresh your content.
1yarn serve 2yarn build
Plugin options
Plugin options can be set inside your vue.config.js:
1// vue.config.js 2module.exports = { 3 pluginOptions: { 4 browserExtension: { 5 // options... 6 }, 7 }, 8};
-
components
- Type:
Object.<string, boolean>
The browser extension components that will be managed by this plugin.
Valid components are:
- background
- popup
- options
- contentScripts
- override
- standalone
- devtools
1components: { 2 background: true, 3 contentScripts: true 4} - Type:
-
componentOptions
- Type:
Object.<string, Object>
See Component options.
- Type:
-
extensionReloaderOptions
- Type:
Object.<string, Object>
See available options in webpack-extension-reloader.
- Type:
-
manifestSync
- Type:
Array<string> - Default:
['version']
Array containing names of
manifest.jsonkeys that will be automatically synced withpackage.jsonon build.Currently, the only supported keys are
versionanddescription. - Type:
-
manifestTransformer
- Type:
Function
Function to modify the manifest JSON outputted by this plugin.
An example use case is adding or removing permissions depending on which browser is being targeted.
1manifestTransformer: (manifest) => { 2 if (process.env.BROWSER === 'chrome') { 3 manifest.permissions.push('pageCapture'); 4 } 5 return manifest; 6}; - Type:
-
modesToZip
Deprecated. Any mode will be zipped to the artifacts dir, when
NODE_ENV=production(the default in the normalyarn build). For more information on how to setNODE_ENV=productionin other modes see Vue CLI docs – Example Staging Mode -
artifactsDir
- Type:
string - Default:
'./artifacts'
Directory where the zipped browser extension should get created.
- Type:
-
artifactFilename
- Type:
Function - Default:
({name, version, mode}) => `${name}-v${version}-${mode}.zip`
Optional function to generate a custom artifact filename. Useful for naming builds for different browsers.
The function takes a single object parameter containing:
name- Name frompackage.jsonversion- Version frompackage.jsonmode- Vue CLI mode such as 'production'
For example,
1// vue.config.js 2module.exports = { 3 pluginOptions: { 4 browserExtension: { 5 artifactFilename: ({ name, version, mode }) => { 6 if (mode === 'production') { 7 return `${name}-v${version}-${process.env.BROWSER}.zip`; 8 } 9 return `${name}-v${version}-${process.env.BROWSER}-${mode}.zip`; 10 }, 11 }, 12 }, 13}; - Type:
Component options
Some browser extension components have additional options which can be set as follows:
1// vue.config.js 2module.exports = { 3 pluginOptions: { 4 browserExtension: { 5 componentOptions: { 6 // <name of component>: <options> 7 // e.g. 8 contentScripts: { 9 entries: { 10 content1: 'src/content-script1.js', 11 content2: 'src/content-script2.js', 12 }, 13 }, 14 }, 15 }, 16 }, 17};
background
-
entry
- Type:
string|Array<string>
Background script as webpack entry using the single entry shorthand syntax.
1background: { 2 entry: 'src/my-background-script.js'; 3} - Type:
contentScripts
-
entries
- Type:
{[entryChunkName: string]: string|Array<string>}
Content scripts as webpack entries using using the object syntax.
1contentScripts: { 2 entries: { 3 'my-first-content-script': 'src/content-script.js', 4 'my-second-content-script': 'src/my-second-script.js' 5 } 6} - Type:
Internationalization
Some boilerplate for internationalization has been added. This follows the i18n (chrome|WebExtention) spec.
Provided for you is the default_locale option in the manifest, and a _locales directory.
There is some basic usage of it in the manifest, as well as in some of the boilerplate files.
Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it.
If you do not want to translate your app, simply delete the public/_locales directory, and no longer use the browser.i18n methods.
Browser Polyfills
This plugin by default adds in the official mozilla webextension polyfill to the build. The opinion of this plugin is that developers should be building cross platform, and should have reasonable tooling to do so. By emphasizing cross platform first, your application will be adhering to the community standards, be ready for distribution to other extension stores, and avoid developing against browser APIs that may have no equivalent. The polyfill is a no-op on firefox, and only takes up 20.5kb unminified.
If you still feel strongly to not include the polyfill, then this is what you need to add to your webpack chain to do so.
vue.config.js
1module.exports = { 2 chainWebpack(config) { 3 config.plugins.delete('provide-webextension-polyfill'); 4 config.module.rules.delete('provide-webextension-polyfill'); 5 }, 6};
Testing
This library is following the standard styling of vue projects, and those are really the only tests to perform.
1yarn test
Roadmap
- A preset
- Cleanup the dist-zip directory
Credits
- https://github.com/Kocal/vue-web-extension For inspiration on app and build structure
- https://github.com/YuraDev/vue-chrome-extension-template For the logo crop and app/scaffold structure
- @YuraDev for the wonderful WCER plugin for livereloading extensions
No vulnerabilities found.
No security vulnerabilities found.