{"id":13479468,"url":"https://github.com/webextension-toolbox/webextension-toolbox","last_synced_at":"2025-05-14T10:13:34.324Z","repository":{"id":28192543,"uuid":"116293239","full_name":"webextension-toolbox/webextension-toolbox","owner":"webextension-toolbox","description":"Small CLI toolbox for cross-browser WebExtension development","archived":false,"fork":false,"pushed_at":"2025-03-10T11:23:19.000Z","size":2041,"stargazers_count":754,"open_issues_count":5,"forks_count":70,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-07T03:09:42.914Z","etag":null,"topics":["auto","chrome","chrome-extension","cli-toolbox","edge","edge-extension","firefox","firefox-extension","opera-extension","webextension","webextension-toolbox","webpack"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@webextension-toolbox/webextension-toolbox","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":".github/CONTRIBUTING.md","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},"funding":{"github":["balcsida","HaNdTriX"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-01-04T18:24:25.000Z","updated_at":"2025-04-01T20:16:54.000Z","dependencies_parsed_at":"2023-11-25T00:22:04.891Z","dependency_job_id":"200642e1-69e4-45cf-8ce3-b8f236a17057","html_url":"https://github.com/webextension-toolbox/webextension-toolbox","commit_stats":{"total_commits":449,"total_committers":23,"mean_commits":19.52173913043478,"dds":0.7483296213808464,"last_synced_commit":"acf03278a2ef11acec7fb95368532015fa29f124"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebextension-toolbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebextension-toolbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebextension-toolbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextension-toolbox%2Fwebextension-toolbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webextension-toolbox","download_url":"https://codeload.github.com/webextension-toolbox/webextension-toolbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248950647,"owners_count":21188309,"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":["auto","chrome","chrome-extension","cli-toolbox","edge","edge-extension","firefox","firefox-extension","opera-extension","webextension","webextension-toolbox","webpack"],"created_at":"2024-07-31T16:02:16.892Z","updated_at":"2025-04-14T19:46:03.605Z","avatar_url":"https://github.com/webextension-toolbox.png","language":"TypeScript","funding_links":["https://github.com/sponsors/balcsida","https://github.com/sponsors/HaNdTriX"],"categories":["TypeScript","Uncategorized","Tooling","chrome-extension"],"sub_categories":["Uncategorized"],"readme":"[\u003cimg align=\"right\" src=\"./assets/icon.svg?sanitize=true\"\u003e](https://www.npmjs.com/package/@webextension-toolbox/webextension-toolbox)\n\n# WebExtension Toolbox\n\n[![npm version](https://badge.fury.io/js/@webextension-toolbox%2Fwebextension-toolbox.svg)](https://badge.fury.io/js/webextension-toolbox%2Fwebextension-toolbox)\n[![Node.js CI](https://github.com/webextension-toolbox/webextension-toolbox/actions/workflows/build.yml/badge.svg)](https://github.com/webextension-toolbox/webextension-toolbox/actions/workflows/build.yml)\n[![license](https://img.shields.io/npm/l/@webextension-toolbox%2Fwebextension-toolbox.svg)](https://github.com/webextension-toolbox/webextension-toolbox/blob/main/LICENSE)\n\nSmall cli toolbox for creating cross-browser WebExtensions.\n\nIf you want to get started quickly check out the [yeoman generator](https://github.com/webextension-toolbox/generator-web-extension) for this project.\n\n\u003c!-- toc --\u003e\n\n- [WebExtension Toolbox](#webextension-toolbox)\n- [Browser Support](#browser-support)\n  - [Official](#official)\n  - [Unofficial](#unofficial)\n- [Features](#features)\n  - [Packing](#packing)\n  - [Manifest validation](#manifest-validation)\n  - [Manifest defaults](#manifest-defaults)\n  - [Typescript Support](#typescript-support)\n  - [Manifest vendor keys](#manifest-vendor-keys)\n    - [Example](#example)\n  - [Polyfill](#polyfill)\n- [Usage](#usage)\n  - [Install](#install)\n      - [Globally](#globally)\n      - [Locally](#locally)\n  - [Development](#development)\n    - [Syntax](#syntax)\n    - [Examples](#examples)\n  - [Build](#build)\n    - [Syntax](#syntax-1)\n      - [Building](#building)\n      - [Developing](#developing)\n  - [.webextensiontoolboxrc](#webextensiontoolboxrc)\n  - [Customizing webpack config](#customizing-webpack-config)\n- [FAQ](#faq)\n  - [What is the difference to web-ext?](#what-is-the-difference-to-web-ext)\n  - [How do I use React?](#how-do-i-use-react)\n  - [How do I use Typescript?](#how-do-i-use-typescript)\n  - [What is SWC?](#what-is-swc)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n# Browser Support\n\n## Official\n\nThese browsers are tested through [github actions](https://github.com/webextension-toolbox/webextension-toolbox/actions/workflows/build.yml)\n\n- Edge (`edge`)\n- Firefox (`firefox`)\n- Chrome (`chrome`)\n- Safari (`safari`)\n- Opera (`opera`)\n\n## Unofficial\n\nThese browsers will compile but are not tested\n\n- Internet Explorer (`ie`)\n- iOS Safari (`ios_saf`)\n- Opera Mini (`op_mini`)\n- Android Browser (`android`)\n- Blackberry Browser (`bb`)\n- Opera Mobile (`op_mob`)\n- Chrome for Android (`and_chr`)\n- Firefox for Android (`and_ff`)\n- Internet Explorer Mobile (`ie_mob`)\n- UC Browser (`and_uc`)\n- Samsung Internet (`samsung`)\n- QQ Browser (`and_qq`)\n- Baidu Browser (`baidu`)\n- KaiOS (`kaios`)\n\n# Features\n\n## Packing\n\nThe `build` task creates specific bundles for:\n\n- Firefox (`.xpi`)\n- Opera (`.crx`)\n\nall other bundles are `.zip` files\n\n## Manifest validation\n\nValidates your `manifest.json` while compiling.\n\nYou can skip this by adding `--validateManifest` to your `build` or `dev` command.\n\n## Manifest defaults\n\nUses default fields (`name`, `version`, `description`) from your `package.json`\n\n## Typescript Support\n\nNative typescript support (but not enforced!)\n(see section [How do I use Typescript?](#how-do-i-use-typescript))\n\n## Manifest vendor keys\n\nAllows you to define vendor specific manifest keys.\n\n### Example\n\n`manifest.json`\n\n```\n\"name\": \"my-extension\",\n\"__chrome__key\": \"yourchromekey\",\n\"__chrome|opera__key2\": \"yourblinkkey\"\n```\n\nIf the vendor is `chrome` it compiles to:\n\n```\n\"name\": \"my-extension\",\n\"key\": \"yourchromekey\",\n\"key2\": \"yourblinkkey\"\n```\n\nIf the vendor is `opera` it compiles to:\n\n```\n\"name\": \"my-extension\",\n\"key2\": \"yourblinkkey\"\n```\n\nelse it compiles to:\n\n```\n\"name\": \"my-extension\"\n```\n\n## Polyfill\n\nThe [WebExtension specification](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) is currently supported on Chrome, Firefox, Edge (Chromium) and Safari ([Safari Web Extension’s Browser Compatibility](https://developer.apple.com/documentation/safariservices/safari_web_extensions/assessing_your_safari_web_extension_s_browser_compatibility)).\n\nThis toolbox no longer provides any polyfills for cross-browser support. If you need polyfills e.g. between 'browser' and 'chrome', we recommend detecting the browser during the build time using process.env.VENDOR.\n\nThis toolbox comes with \u003ca href=\"https://github.com/babel/babel/tree/master/packages/babel-preset-env\"\u003ebabel-preset-env\u003c/a\u003e. Feel free add custom configuration if you need any custom polyfills.\n\n# Usage\n\n## Install\n\n#### Globally\n\n```shell\n$ npm install -g @webextension-toolbox/webextension-toolbox\n```\n\n#### Locally\n\n```shell\n$ npm install -D @webextension-toolbox/webextension-toolbox\n```\n\n## Development\n\n- Compiles the extension via webpack to `dist/\u003cvendor\u003e`.\n- Watches all extension files and recompiles on demand.\n- Reloads extension or extension page as soon something changed.\n- Sets `process.env.NODE_ENV` to `development`.\n- Sets `process.env.VENDOR` to the current vendor.\n\n### Syntax\n\n```shell\n$ webextension-toolbox dev \u003cvendor\u003e [..options]\n```\n\n### Examples\n\n```shell\n$ webextension-toolbox dev --help\n$ webextension-toolbox dev chrome\n$ webextension-toolbox dev firefox\n$ webextension-toolbox dev edge\n$ webextension-toolbox dev safari\n```\n\n## Build\n\n- Compile extension via webpack to `dist/\u003cvendor\u003e`.\n- Minifies extension Code.\n- Sets `process.env.NODE_ENV` to `production`.\n- Sets `process.env.VENDOR` to the current vendor.\n- Packs extension to `packages`.\n\n### Syntax\n\n#### Building\n\n```shell\nUsage: build [options] \u003cvendor\u003e\n\nCompiles extension for production\n\nOptions:\n  --swc                                Use SWC instead of Babel\n  -c, --config [config]                specify config file path\n  -s, --src [src]                      specify source directory (default: \"app\")\n  -t, --target [target]                specify target directory (default: \"dist/[vendor]\")\n  -d, --devtool [string | false]       controls if and how source maps are generated (default: \"cheap-source-map\")\n  --vendor-version [vendorVersion]     last supported vendor (default: current)\n  --copy-ignore [copyIgnore...]        Do not copy the files in this list, glob pattern\n  --compile-ignore [compileIgnore...]  Do not compile the files in this list, glob pattern\n  --no-manifest-validation             Skip Manifest Validation\n  --save                               Save config to .webextensiontoolboxrc\n  --verbose                            print messages at the beginning and end of incremental build\n  --no-minimize                        disables code minification\n  -h, --help                           display help for command\n```\n\n#### Developing\n\n```shell\nUsage: dev [options] \u003cvendor\u003e\n\nCompiles extension in devmode\n\nArguments:\n  vendor                                The Vendor to compile\n\nOptions:\n  --swc                                Use SWC instead of Babel\n  -c, --config [config]                specify config file path\n  -s, --src [src]                      specify source directory (default: \"app\")\n  -t, --target [target]                specify target directory (default: \"dist/[vendor]\")\n  -d, --devtool [string | false]       controls if and how source maps are generated (default: \"cheap-source-map\")\n  --vendor-version [vendorVersion]     last supported vendor (default: current)\n  --copy-ignore [copyIgnore...]        Do not copy the files in this list, glob pattern\n  --compile-ignore [compileIgnore...]  Do not compile the files in this list, glob pattern\n  --no-manifest-validation             Skip Manifest Validation\n  --save                               Save config to .webextensiontoolboxrc\n  --verbose                            print messages at the beginning and end of incremental build\n  --no-auto-reload                     Do not inject auto reload scripts into background pages or service workers\n  -p, --port [port]                    Define the port for the websocket development server (default: \"35729\")\n  --dev-server [devServer]             use webpack dev server to serve bundled files (default: false)\n  -h, --help                           display help for command\n```\n\n## .webextensiontoolboxrc\n\nThis file is used to configure the WebExtension Toolbox without cli options. You can generate it by running `webextension-toolbox \u003coptions\u003e --save command`. This will take your current cli options and save them to `.webextensiontoolboxrc`. You can then run `webextension-toolbox` without any options\n\n## Customizing webpack config\n\nIn order to extend the usage of `webpack`, you can define a function that extends its config through a file you define through the usage of the `-c` option in your project root.\n\n```js\nmodule.exports = {\n  webpack: (config, { dev, vendor }) =\u003e {\n    // Perform customizations to webpack config\n\n    // Important: return the modified config\n    return config;\n  },\n};\n```\n\nAs WebExtension Toolbox uses webpack’s [devtool](https://webpack.js.org/configuration/devtool/) feature under the hood, you can also customize the desired devtool with the `--devtool` argument.\n\nFor example, if you have problems with source maps on Firefox, you can try the following command:\n\n```\nwebextension-toolbox build firefox --devtool=inline-cheap-source-map\n```\n\nPlease see [Issue #58](https://github.com/webextension-toolbox/webextension-toolbox/issues/58) for more information on this\n\n# FAQ\n\n## What is the difference to [web-ext](https://github.com/mozilla/web-ext)?\n\nIf want to develop browser extensions for Firefox only [web-ext](https://github.com/mozilla/web-ext) might be a better fit for you, since it supports extension signing, better manifest validation and auto mounting.\n\nNevertheless if you want to develop cross browser extensions using\n\n- the same development experience in every browser\n- a single codebase\n- custom webpack configuration\n\nwebextension-toolbox might be your tool of choice.\n\n## How do I use React?\n\n1. `npm install @babel/preset-react --save-dev`\n2. Create a .babelrc file next to your package.json file and insert the following contents:\n\n```\n{\n  \"presets\": [\n    \"@babel/preset-react\"\n  ]\n}\n```\n\n## How do I use Typescript?\n\n1. `npm install typescript --save-dev`\n2. Run `tsc --init` or manually add a tsconfig.json file to your project root\n\n## What is SWC?\n\nSWC (stands for Speedy Web Compiler) is a super-fast TypeScript / JavaScript compiler written in Rust. It's an alternative to Babel. For more informaiton see: https://github.com/swc-project/swc\n\n# License\n\nCopyright 2018-2023 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%2Fwebextension-toolbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebextension-toolbox%2Fwebextension-toolbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebextension-toolbox%2Fwebextension-toolbox/lists"}