{"id":25931790,"url":"https://github.com/cezaraugusto/extension-create","last_synced_at":"2025-03-04T00:01:33.888Z","repository":{"id":44694559,"uuid":"306484159","full_name":"extension-js/extension.js","owner":"extension-js","description":"🧩 The cross-browser extension framework.","archived":false,"fork":false,"pushed_at":"2025-01-16T21:10:52.000Z","size":7700,"stargazers_count":4085,"open_issues_count":29,"forks_count":106,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-02-24T02:31:10.671Z","etag":null,"topics":["boilerplate","browser","browser-extension","browser-extensions","chrome","chromium","cli","edge","extension","extensions","firefox","generator","kit","runner","safari","starter-kit","template","webextension","webextensions"],"latest_commit_sha":null,"homepage":"https://extension.js.org","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/extension-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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":["cezaraugusto"],"open_collective":"extensionjs"}},"created_at":"2020-10-22T23:48:23.000Z","updated_at":"2025-02-23T19:44:20.000Z","dependencies_parsed_at":"2024-01-14T04:39:51.020Z","dependency_job_id":"1e7e8a49-be2a-425e-80b2-1493dba37ea8","html_url":"https://github.com/extension-js/extension.js","commit_stats":{"total_commits":747,"total_committers":14,"mean_commits":"53.357142857142854","dds":0.04016064257028118,"last_synced_commit":"67fd70ce66763c6421315a46f0170d79a0c07d02"},"previous_names":["cezaraugusto/extension-create","cezaraugusto/extension.js","cezaraugusto/extension","extension-js/extension.js"],"tags_count":241,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extension-js%2Fextension.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extension-js%2Fextension.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extension-js%2Fextension.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extension-js%2Fextension.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/extension-js","download_url":"https://codeload.github.com/extension-js/extension.js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241758954,"owners_count":20015249,"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":["boilerplate","browser","browser-extension","browser-extensions","chrome","chromium","cli","edge","extension","extensions","firefox","generator","kit","runner","safari","starter-kit","template","webextension","webextensions"],"created_at":"2025-03-04T00:01:28.382Z","updated_at":"2025-03-04T00:01:33.879Z","avatar_url":"https://github.com/extension-js.png","language":"TypeScript","readme":"[action-image]: https://github.com/extension-js/extension.js/actions/workflows/ci.yml/badge.svg?branch=main\n[action-url]: https://github.com/extension-js/extension.js/actions\n[npm-image]: https://img.shields.io/npm/v/extension.svg\n[npm-url]: https://npmjs.org/package/extension\n[downloads-image]: https://img.shields.io/npm/dm/extension.svg\n[downloads-url]: https://npmjs.org/package/extension\n[node]: https://img.shields.io/node/v/extension.svg\n[node-url]: https://nodejs.org\n[prs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg\n[prs-url]: https://github.com/extension-js/extension/blob/main/CONTRIBUTING.md\n[snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg\n[snyk-url]: https://snyk.io/test/github/extension-js/extension\n[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension.svg?type=shield\u0026issueType=license\n[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension?ref=badge_shield\u0026issueType=license\n[discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord\u0026logo=discord\u0026style=flat\n[discord-url]: https://discord.gg/v9h2RgeTSN\n\n# Extension.js [![fossa][fossa-image]][fossa-url] [![Known Vulnerabilities][snyk-image]][snyk-url] [![workflow][action-image]][action-url] [![discord][discord-image]][discord-url]\n\n\u003c!-- \u003e Plug-and-play, zero-config, cross-browser extension development tool. --\u003e\n\n\u003c!-- \u003e Make it very easy to develop cross-browser extensions. --\u003e\n\n\u003c!-- \u003cimg alt=\"Extension.js with all the browser runners open\" src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96\"\u003e\n\u003chr\u003e --\u003e\n\n\u003cimg alt=\"Logo\" align=\"right\" src=\"https://user-images.githubusercontent.com/4672033/102850460-4d22aa80-43f8-11eb-82db-9efce586f73e.png\" width=\"25%\" /\u003e\n\n\u003c!-- **Create cross-browser extensions with no build configuration.** --\u003e\n\n\u003e Plug-and-play, zero-config, cross-browser extension development tool.\n\n- [Create A New Extension](#create-a-new-extension) — How to create a new extension.\n- [Get Started Immediately](#get-started-immediately) — Get work done in no time.\n- [I have An Extension](#i-have-an-extension) - Use only specific parts of Extension.js.\n\nExtension.js is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, and modern JavaScript.\n\n## Create A New Extension\n\n```bash\nnpx extension create my-extension\ncd my-extension\nnpm run dev\n```\n\nA new browser instance will open up with your extension ready for development.\n\nYou are done. Time to hack on your extension!\n\nhttps://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586\n\n## Web Standards and Modern JavaScript Support\n\nFor a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/docs/getting-started/templates).\n\n| \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/78e5fe3d-dc79-4aa2-954e-1a5973d1d9db\" width=\"70\"\u003e | \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2\" width=\"70\"\u003e |\n| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |\n|                                                      ESNext\u003cbr\u003e✅                                                       |                                                    TypeScript\u003cbr\u003e✅                                                     |                                                       WASM\u003cbr\u003e✅                                                        |                                                       React\u003cbr\u003e✅                                                       |                                                        Vue\u003cbr\u003e✅                                                        |                                                      Angular\u003cbr\u003e👋                                                      |                                                      Svelte\u003cbr\u003e✅                                                       |                                                       Solid\u003cbr\u003e👋                                                       |                                                      Preact\u003cbr\u003e✅                                                       |\n\n👋 = PR Welcome!\n\n## Get Started Immediately\n\n### Use Chrome to start developing an extension from Chrome Extension Samples\n\n\u003e See the example below where we request the sample [page-redder](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).\n\n```bash\nnpx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge\n```\n\nhttps://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n   \u003csummary\u003e   \n   🔥 Use Edge to start developing an extension from Chrome Extension Samples \n   \u003c/summary\u003e\n\n\u003e See the example below where we request the sample [magic8ball](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball) from from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) with Edge as the runtime browser.\n\n```bash\nnpx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge\n```\n\nhttps://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n   \u003csummary\u003e\n   🔥🔥 Use Edge to start developing a Mozilla Add-On from MDN WebExtensions Examples\n   \u003c/summary\u003e\n\n\u003e See the example below where we request the sample [Apply CSS](https://github.com/mdn/webextensions-examples/tree/main/apply-css) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Edge as the runtime browser.\n\n```bash\nnpx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true\n```\n\nhttps://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n   \u003csummary\u003e\n   🔥🔥🔥 Use Chrome and Firefox to start developing a Mozilla Add-On from MDN WebExtensions Examples\n   \u003c/summary\u003e\n\n\u003e See the example below where we request the sample [firefox-code-search](https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples) using Chrome and Firefox as the runtime browsers.\n\n```bash\nnpx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true\n```\n\nhttps://github.com/cezaraugusto/extension.js/assets/4672033/ac94b608-c936-40df-bce7-63ffd7fe31c5\n\n\u003c/details\u003e\n\n## I have An Extension\n\nhttps://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c\n\nIf you have an existing extension which is using a package manager, you can install the Extension.js package and manually create the scripts used to run your extension. See the demo above or follow these instructions to get it done:\n\n**Step 1 - Install extension as a `devDependency`**\n\n```bash\nnpm install extension --save-dev\n```\n\n**Step 2 - Link your npm scripts with the executable Extension.js commands**\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"extension build\",\n    \"dev\": \"extension dev\",\n    \"start\": \"extension start\"\n  },\n  \"devDependencies\": {\n    // ...other dependencies\n    \"extension\": \"latest\"\n  }\n}\n```\n\nDone. You are all set!\n\n- To develop the extension, run `npm run dev`.\n- To visualize the extension in production mode, run `npm run start`.\n- To build the extension in production mode, run `npm run build`.\n\n## Using a specific browser for development\n\n### Desktop Browsers\n\n| \u003cimg src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/6ce53a31-c6f6-4a1c-b927-e9ec7fd2df78\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/brave/brave.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera.svg\" width=\"70\"\u003e | \u003cimg width=\"70\" src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari.svg\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/vivaldi/vivaldi.svg\" width=\"70\"\u003e |\n| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |\n|                                                        Arc\u003cbr\u003e☑️                                                        |                                              Brave\u003cbr\u003e☑️                                              |                                              Chrome\u003cbr\u003e✅                                               |                                               Chromium\u003cbr\u003e☑️                                                |                                             Edge\u003cbr\u003e✅                                              |                                               Firefox\u003cbr\u003e✅                                               |                                              Opera\u003cbr\u003e☑️                                              |                                              Safari\u003cbr\u003e⛔️                                              |                                               Vivaldi\u003cbr\u003e☑️                                               |\n\n☑️ = It is theoretically possible to load all Chromium forks given the current support for Chrome. There is a request ticket for [supporting all Chromium-based browsers](https://github.com/cezaraugusto/extension.js/issues/59). Most requested features are added first, so thumbs up it to speed-up the development process.\n\n### Mobile Browsers\n\n| \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg\" width=\"70\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari-ios/safari-ios.svg\" width=\"70\"\u003e |\n| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |\n|                                         Firefox (Android)\u003cbr\u003e⛔️                                          |                                               Safari (iOS)\u003cbr\u003e⛔️                                               |\n\nIf you want to target a specific browser, just pass the `--browser` flag to the `dev`/`start` command (based on the list available above), like `npx extension dev path/to/extension --browser=edge`.\n\n\u003e Hint\n\u003e Pass --browser=\"all\" to load all available browsers at once.\n\n```sh\nextension dev --browser=all\n```\n\n\u003cimg alt=\"Extension.js with all the browser runners open\" src=\"https://github.com/cezaraugusto/extension.js/assets/4672033/f0f5bbfc-e873-4856-9fdd-db2b42d9ab96\"\u003e\n\n## License\n\nMIT (c) Cezar Augusto.\n","funding_links":["https://github.com/sponsors/cezaraugusto","https://opencollective.com/extensionjs"],"categories":["JavaScript","Tooling"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcezaraugusto%2Fextension-create","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcezaraugusto%2Fextension-create","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcezaraugusto%2Fextension-create/lists"}