{"id":22118214,"url":"https://github.com/webextension-toolbox/webpack-webextension-plugin","last_synced_at":"2025-04-12T21:27:45.798Z","repository":{"id":32510390,"uuid":"127203143","full_name":"webextension-toolbox/webpack-webextension-plugin","owner":"webextension-toolbox","description":"Webpack plugin that compiles WebExtension manifest.json files and adds smart auto reload","archived":false,"fork":false,"pushed_at":"2025-03-10T08:42:51.000Z","size":1393,"stargazers_count":82,"open_issues_count":2,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T00:10:00.936Z","etag":null,"topics":["autoreload","firefox","webextension","webpack","webpack-plugin","websockets"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@webextension-toolbox/webpack-webextension-plugin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webextension-toolbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-03-28T21:55:25.000Z","updated_at":"2024-12-30T22:23:30.000Z","dependencies_parsed_at":"2023-11-26T23:22:25.051Z","dependency_job_id":"e59f30d3-e9d5-482d-9a84-2cacfdea0c41","html_url":"https://github.com/webextension-toolbox/webpack-webextension-plugin","commit_stats":{"total_commits":166,"total_committers":20,"mean_commits":8.3,"dds":0.6927710843373494,"last_synced_commit":"b2c49b5435dc5e41e1c9796bec44adef2e976c06"},"previous_names":["webextension-tools/webpack-webextension-plugin"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebpack-webextension-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebpack-webextension-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebpack-webextension-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebpack-webextension-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webextension-toolbox","download_url":"https://codeload.github.com/webextension-toolbox/webpack-webextension-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633768,"owners_count":21136912,"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":["autoreload","firefox","webextension","webpack","webpack-plugin","websockets"],"created_at":"2024-12-01T13:48:14.512Z","updated_at":"2025-04-12T21:27:45.777Z","avatar_url":"https://github.com/webextension-toolbox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg align=\"right\" src=\"./.github/assets/icon.svg?sanitize=true\"\u003e](https://www.npmjs.com/package/webpack-webextension-plugin)\n\n# Webpack WebExtension Plugin\n\n[![npm package](https://badge.fury.io/js/@webextension-toolbox%2Fwebpack-webextension-plugin.svg)](https://www.npmjs.com/package/webpack-webextension-plugin)\n[![license](https://img.shields.io/npm/l/@webextension-toolbox%2Fwebpack-webextension-plugin.svg)](https://github.com/webextension-toolbox/webpack-webextension-plugin/blob/main/LICENSE)\n\nWebpack plugin that compiles web-extension `manifest.json` files and adds smart auto reload.\n\nIf you are looking for a simple CLI tool that utilizes this checkout [https://github.com/webextension-toolbox/webextension-toolbox](https://github.com/webextension-toolbox/webextension-toolbox)\n\n## What does it do?\n\n- Autoreload extensions via websockets\n- Use vendor prefixes in manifest properties\n- ENV replacement in manifest values\n- Validates some `manifest.json` fields\n\n## Install\n\n```bash\n$ npm i @webextension-toolbox/webextension-toolbox\n```\n\n## Usage\n\n```js\nimport { WebextensionPlugin } from \"@webextension-toolbox/webpack-webextension-plugin\";\n\nconst config = {\n  plugins: [\n    new WebextensionPlugin({\n      vendor: \"chrome\",\n    }),\n  ],\n};\n```\n\n### API\n\n#### new WebextensionPlugin([options])\n\nAdd result to webpack plugins to initialize.\n\n##### options\n\nType: `Object`\n\nAny of the options below.\n\n###### vendor\n\nType: `String`\nDefault: `chrome`\nAny of: `chrome`, `opera`, `firefox`, `edge`, `safari`\n\nUsed for vendor prefixing in the `manifest.json`. More infos regarding this can be found below.\n\n###### port\n\nType: `Integer`\nDefault: `35729`\n\nSpecify the listening port for the webstocket development server.\n\n###### autoreload\n\nType: `Boolean`\nDefault: true\n\nEnables auto reload. If not specified will be enabled when using webpacks watch mode.\n\n###### quiet\n\nType: `Boolean`\nDefault: false\n\nDisable plugin logging.\n\n###### reconnectTime\n\nType: `Integer`\nDefault: `3000`\n\nSpecify the reconnect time to the development server from the extension side.\n\n###### manifestDefaults\n\nType: `Object`\nDefault: `{}`\n\nAllows you to define defaults for the `manifest.json` file.\n\n###### skipManifestValidation\n\nType: `Boolean`\nDefault: false\n\nSkip Manifest Validation\n\n## FAQ\n\n### How does smart autoreload work?\n\nWe create/extend a background page or service worker in the extension with a websockets client if `autoreload` is true the webpack is `watch`ing, that connects to our custom websocket server.\n\nAs soon as a specific files changes the client checks how to reload the extension:\n\n- if `manifest.json` change → full reload\n- if `manifest.json` dependencies change → full reload\n- if `_locales` change → full reload\n- else reload current tab \u0026 all extension views\n\n### What are vendor prefixed manifest keys?\n\nVendor prefixed manifest keys allow you to write one `manifest.json` for multible vendors.\n\n```js\n{\n  \"__chrome__name\": \"SuperChrome\",\n  \"__firefox__name\": \"SuperFox\",\n  \"__edge__name\": \"SuperEdge\",\n  \"__opera__name\": \"SuperOpera\",\n  \"__safari__name\": \"SuperSafari\"\n}\n```\n\nif the vendor is `chrome` this compiles to:\n\n```js\n{\n  \"name\": \"SuperChrome\",\n}\n```\n\n---\n\nAdd keys to multiple vendors by seperating them with | in the prefix\n\n```\n{\n  __chrome|opera__name: \"SuperBlink\"\n}\n```\n\nif the vendor is `chrome` or `opera`, this compiles to:\n\n```\n{\n  \"name\": \"SuperBlink\"\n}\n```\n\n### Environment Variable Replacement in Manifest\n\n```js\n{\n  \"name\": \"__MY_ENV_VARIABLE__\",\n}\n```\n\nWould be replaced with the value of `process.env.MY_ENV_VARIABLE`\n\n### Why are you not using mozillas [web-ext](https://github.com/mozilla/web-ext) package?\n\n- `webpack-webextension-plugin` should work for every browser in the same way.\n- `web-ext` only works with Chrome and Firefox. You should definitely still check it out.\n\n## Links\n\n- [generator-web-extension](https://github.com/webextension-toolbox/generator-web-extension)\n- [webextension-toolbox](https://github.com/webextension-toolbox/webextension-toolbox)\n\n## License\n\nCopyright 2018-2024 Henrik Wenz\n\nThis project is free software released under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebextension-toolbox%2Fwebpack-webextension-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebextension-toolbox%2Fwebpack-webextension-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebextension-toolbox%2Fwebpack-webextension-plugin/lists"}