{"id":15573924,"url":"https://github.com/adambullmer/vue-cli-plugin-browser-extension","last_synced_at":"2025-05-16T06:04:34.531Z","repository":{"id":38552801,"uuid":"140457927","full_name":"adambullmer/vue-cli-plugin-browser-extension","owner":"adambullmer","description":"Browser extension development plugin for vue-cli 3.0","archived":false,"fork":false,"pushed_at":"2024-08-28T15:25:20.000Z","size":1690,"stargazers_count":429,"open_issues_count":39,"forks_count":76,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-04T22:38:20.303Z","etag":null,"topics":["browser-extension","plugin","vue","vue-cli"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adambullmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-10T16:10:57.000Z","updated_at":"2025-04-21T16:55:49.000Z","dependencies_parsed_at":"2024-10-02T18:14:52.895Z","dependency_job_id":"08228124-51b7-46aa-89c2-da0e7e3353af","html_url":"https://github.com/adambullmer/vue-cli-plugin-browser-extension","commit_stats":{"total_commits":188,"total_committers":11,"mean_commits":17.09090909090909,"dds":0.3085106382978723,"last_synced_commit":"45bd47236e37247d7c67ca38f70693c72627d89e"},"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adambullmer%2Fvue-cli-plugin-browser-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adambullmer%2Fvue-cli-plugin-browser-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adambullmer%2Fvue-cli-plugin-browser-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adambullmer%2Fvue-cli-plugin-browser-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adambullmer","download_url":"https://codeload.github.com/adambullmer/vue-cli-plugin-browser-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254419153,"owners_count":22068215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-extension","plugin","vue","vue-cli"],"created_at":"2024-10-02T18:14:48.830Z","updated_at":"2025-05-16T06:04:34.509Z","avatar_url":"https://github.com/adambullmer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-cli-plugin-browser-extension\n\nBrowser extension development plugin for vue-cli 3.x\n\n## What does it do?\n\nThis is intended to be a vue-cli@3.x replacement for [Kocal/vue-web-extension `v1`](https://github.com/Kocal/vue-web-extension/tree/v1) (now, [Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) is a preset using this plugin).\n\nThis plugin changes the `serve` command for your vue applications.\nThis new command is only for running a livereload server while testing out your browser extension.\n\nThis removes the entrypoint of `src/main.js`, and as such will not scaffold a general vue app.\n\nPackaging 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.\n\nIt makes some assumptions about your project setup.\nI hope to be able to scaffold an app so that identifying the below in unnecessary.\n\n```\n.\n├── public/\n│   ├── _locales/\n│   │   └── en/\n│   │       └── messages.json\n│   ├── icons/\n│   │   └── Icons for your extension. Should include a 16, 19, 38, 48, and 128px square image\n│   └── browser-extension.html (default target html template)\n├── src/\n│   ├── assets/\n│   │   └── Static assets in use in your app, like logo.png\n│   ├── components/\n│   │   └── HelloWorld.vue (modified)\n│   ├── content-scripts\n│   │   └── content-script.js\n│   ├── devtools/ (asked during project generation)\n│   │   ├── App.vue\n│   │   └── main.js\n│   ├── options/ (asked during project generation)\n│   │   ├── App.vue\n│   │   └── main.js\n│   ├── popup/ (asked during project generation)\n│   │   ├── App.vue\n│   │   └── main.js\n│   ├── override/ (asked during project generation)\n│   │   ├── App.vue\n│   │   └── main.js\n│   └── standalone/ (asked during project generation)\n│      ├── App.vue\n│      └── main.js\n├── background.js\n└── manifest.json\n```\n\n## System Dependencies\n\nIf you wish to use the signing key functionality you will need to have `openssl` available on your system.\n\n## Adding to your project\n\nThis can be added to your vuejs project by one of the following methods:\n\n- Using the `vue ui` and searching for this project\n- Using the vue cli `vue add browser-extension` command\n\n## Usage\n\nRunning the Livereload server.\nThis will build and write to the local `dist` directory.\n\nThis 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.\nYou can then add this as an unpacked plugin to your browser, and will continue to update as you make changes.\n\n**NOTE:** you cannot get HMR support in the popup window, however, closing and reopening will refresh your content.\n\n```sh\nyarn serve\nyarn build\n```\n\n## Plugin options\n\nPlugin options can be set inside your `vue.config.js`:\n\n```js\n// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    browserExtension: {\n      // options...\n    },\n  },\n};\n```\n\n- **components**\n\n  - Type: `Object.\u003cstring, boolean\u003e`\n\n  The browser extension components that will be managed by this plugin.\n\n  Valid components are:\n\n  - background\n  - popup\n  - options\n  - contentScripts\n  - override\n  - standalone\n  - devtools\n\n  ```js\n  components: {\n    background: true,\n    contentScripts: true\n  }\n  ```\n\n- **componentOptions**\n\n  - Type: `Object.\u003cstring, Object\u003e`\n\n  See [Component options](#component-options).\n\n- **extensionReloaderOptions**\n\n  - Type: `Object.\u003cstring, Object\u003e`\n\n  See available options in [webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader#how-to-use).\n\n- **manifestSync**\n\n  - Type: `Array\u003cstring\u003e`\n  - Default: `['version']`\n\n  Array containing names of `manifest.json` keys that will be automatically synced with `package.json` on build.\n\n  Currently, the only supported keys are `version` and `description`.\n\n- **manifestTransformer**\n\n  - Type: `Function`\n\n  Function to modify the manifest JSON outputted by this plugin.\n\n  An example use case is adding or removing permissions depending on which browser is being targeted.\n\n  ```js\n  manifestTransformer: (manifest) =\u003e {\n    if (process.env.BROWSER === 'chrome') {\n      manifest.permissions.push('pageCapture');\n    }\n    return manifest;\n  };\n  ```\n\n- **modesToZip**\n\n  Deprecated. Any mode will be zipped to the artifacts dir, when `NODE_ENV=production` (the default in the normal `yarn build`). For more information on how to set `NODE_ENV=production` in other modes see [Vue CLI docs – Example Staging Mode](https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode)\n\n- **artifactsDir**\n\n  - Type: `string`\n  - Default: `'./artifacts'`\n\n  Directory where the zipped browser extension should get created.\n\n- **artifactFilename**\n\n  - Type: `Function`\n  - Default: ``({name, version, mode}) =\u003e `${name}-v${version}-${mode}.zip` ``\n\n  Optional function to generate a custom artifact filename. Useful for naming builds for different browsers.\n\n  The function takes a single object parameter containing:\n  - `name` - Name from `package.json`\n  - `version` - Version from `package.json`\n  - `mode` - Vue CLI mode such as 'production'\n  \n  For example,\n\n  ```js\n  // vue.config.js\n  module.exports = {\n    pluginOptions: {\n      browserExtension: {\n        artifactFilename: ({ name, version, mode }) =\u003e {\n          if (mode === 'production') {\n            return `${name}-v${version}-${process.env.BROWSER}.zip`;\n          }\n          return `${name}-v${version}-${process.env.BROWSER}-${mode}.zip`;\n        },\n      },\n    },\n  };\n  ```\n\n### Component options\n\nSome browser extension components have additional options which can be set as follows:\n\n```js\n// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    browserExtension: {\n      componentOptions: {\n        // \u003cname of component\u003e: \u003coptions\u003e\n        // e.g.\n        contentScripts: {\n          entries: {\n            content1: 'src/content-script1.js',\n            content2: 'src/content-script2.js',\n          },\n        },\n      },\n    },\n  },\n};\n```\n\n#### background\n\n- **entry**\n\n  - Type: `string|Array\u003cstring\u003e`\n\n  Background script as webpack entry using the [single entry shorthand syntax](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax).\n\n  ```js\n  background: {\n    entry: 'src/my-background-script.js';\n  }\n  ```\n\n#### contentScripts\n\n- **entries**\n\n  - Type: `{[entryChunkName: string]: string|Array\u003cstring\u003e}`\n\n  Content scripts as webpack entries using using the [object syntax](https://webpack.js.org/concepts/entry-points/#object-syntax).\n\n  ```js\n  contentScripts: {\n    entries: {\n      'my-first-content-script': 'src/content-script.js',\n      'my-second-content-script': 'src/my-second-script.js'\n    }\n  }\n  ```\n\n## Internationalization\n\nSome boilerplate for internationalization has been added. This follows the i18n ([chrome](https://developer.chrome.com/extensions/i18n)|[WebExtention](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n)) spec.\nProvided for you is the `default_locale` option in the manifest, and a `_locales` directory.\nThere is some basic usage of it in the manifest, as well as in some of the boilerplate files.\nSince this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it.\nIf you do not want to translate your app, simply delete the `public/_locales` directory, and no longer use the `browser.i18n` methods.\n\n## Browser Polyfills\n\nThis plugin by default adds in the official [mozilla webextension polyfill](https://github.com/mozilla/webextension-polyfill) to the build.\nThe opinion of this plugin is that developers should be building cross platform, and should have reasonable tooling to do so.\nBy 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.\nThe polyfill is a no-op on firefox, and only takes up 20.5kb unminified.\n\nIf you still feel strongly to not include the polyfill, then this is what you need to add to your webpack chain to do so.\n\n`vue.config.js`\n\n```js\nmodule.exports = {\n  chainWebpack(config) {\n    config.plugins.delete('provide-webextension-polyfill');\n    config.module.rules.delete('provide-webextension-polyfill');\n  },\n};\n```\n\n## Testing\n\nThis library is following the standard styling of vue projects, and those are really the only tests to perform.\n\n```sh\nyarn test\n```\n\n## Roadmap\n\n- A preset\n- Cleanup the dist-zip directory\n\n## Credits\n\n- [https://github.com/Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) For inspiration on app and build structure\n- [https://github.com/YuraDev/vue-chrome-extension-template](https://github.com/YuraDev/vue-chrome-extension-template) For the logo crop and app/scaffold structure\n- [@YuraDev](https://github.com/YuraDev) for the wonderful WCER plugin for livereloading extensions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadambullmer%2Fvue-cli-plugin-browser-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadambullmer%2Fvue-cli-plugin-browser-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadambullmer%2Fvue-cli-plugin-browser-extension/lists"}