{"id":13433689,"url":"https://github.com/abhijithvijayan/web-extension-starter","last_synced_at":"2025-05-15T11:00:22.856Z","repository":{"id":37406248,"uuid":"208835354","full_name":"abhijithvijayan/web-extension-starter","owner":"abhijithvijayan","description":"🖥🔋Web Extension starter to build \"Write Once Run on Any Browser\" extension","archived":false,"fork":false,"pushed_at":"2024-01-30T23:37:49.000Z","size":2777,"stargazers_count":2085,"open_issues_count":11,"forks_count":173,"subscribers_count":19,"default_branch":"react-typescript","last_synced_at":"2025-04-14T16:58:00.576Z","etag":null,"topics":["boilerplate","chrome","chrome-extension","chrome-extension-react","cross-browser","edge","extension","firefox","firefox-addon","hacktoberfest","opera-extension","react-extension","reactjs","sass","starter","typescript","web","web-extension-starter","web-extensions","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/abhijithvijayan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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":["abhijithvijayan"],"patreon":"abhijithvijayan","open_collective":"abhijithvijayan","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":"abhijithvijayan","otechie":null,"custom":["https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan"]}},"created_at":"2019-09-16T15:33:44.000Z","updated_at":"2025-04-12T01:32:50.000Z","dependencies_parsed_at":"2023-09-25T01:53:34.259Z","dependency_job_id":"d8768fbd-cce3-4382-ae8d-141c391156aa","html_url":"https://github.com/abhijithvijayan/web-extension-starter","commit_stats":{"total_commits":194,"total_committers":12,"mean_commits":"16.166666666666668","dds":"0.14948453608247425","last_synced_commit":"fde4197f1202a7ded9ba147c8722d35d5e72dce8"},"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fweb-extension-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fweb-extension-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fweb-extension-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Fweb-extension-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhijithvijayan","download_url":"https://codeload.github.com/abhijithvijayan/web-extension-starter/tar.gz/refs/heads/react-typescript","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"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","chrome","chrome-extension","chrome-extension-react","cross-browser","edge","extension","firefox","firefox-addon","hacktoberfest","opera-extension","react-extension","reactjs","sass","starter","typescript","web","web-extension-starter","web-extensions","webpack4"],"created_at":"2024-07-31T02:01:33.207Z","updated_at":"2025-05-15T11:00:22.813Z","avatar_url":"https://github.com/abhijithvijayan.png","language":"JavaScript","funding_links":["https://github.com/sponsors/abhijithvijayan","https://patreon.com/abhijithvijayan","https://opencollective.com/abhijithvijayan","https://issuehunt.io/r/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan","https://www.patreon.com/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan'"],"categories":["JavaScript","TypeScript","chrome-extension","Starter Templates","Javascript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🚀 web-extension-starter\u003c/h1\u003e\n\u003cp align=\"center\"\u003eWeb Extension starter to build \"Write Once Run on Any Browser\" extension\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/abhijithvijayan/web-extension-starter\"\u003e\n    \u003cimg src=\"https://travis-ci.com/abhijithvijayan/web-extension-starter.svg?branch=react-typescript\" alt=\"Travis Build\" /\u003e\n  \u003c/a\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/abhijithvijayan/web-extension-starter\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/abhijithvijayan/web-extension-starter.svg?colorB=orange\" alt=\"DEPENDENCIES\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/abhijithvijayan/web-extension-starter/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/abhijithvijayan/web-extension-starter.svg\" alt=\"LICENSE\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera\"\u003e\n     \u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\" alt=\"TWEET\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003ch3 align=\"center\"\u003e🙋‍♂️ Made by \u003ca href=\"https://twitter.com/_abhijithv\"\u003e@abhijithvijayan\u003c/a\u003e\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  Donate:\n  \u003ca href=\"https://www.paypal.me/iamabhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePayPal\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e,\n  \u003ca href=\"https://www.patreon.com/abhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePatreon\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://www.buymeacoffee.com/abhijithvijayan' target='_blank'\u003e\n    \u003cimg height='36' style='border:0px;height:36px;' src='https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png' border='0' alt='Buy Me a Coffee' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/web-extension-starter) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera) about it.\n\n🧙‍♂️ **React + TypeScript** = [This](https://github.com/abhijithvijayan/web-extension-starter/tree/react-typescript) branch\n\n😨 **React + JavaScript** = Checkout [react-javascript](https://github.com/abhijithvijayan/web-extension-starter/tree/react-javascript) branch\n\n👶🏼 **HTML + JavaScript** = Checkout [master](https://github.com/abhijithvijayan/web-extension-starter/tree/master) branch\n\n## Features\n\n- Cross Browser Support (Web-Extensions API)\n- Browser Tailored Manifest generation\n- Automatic build on code changes\n- Auto packs browser specific build files\n- SASS styling\n- TypeScript by default\n- ES6 modules support\n- React UI Library by default\n- Smart reload\n\n## Browser Support\n\n| [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](/) | [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](/) | [![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](/) | [![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](/) | [![Yandex](https://raw.github.com/alrra/browser-logos/master/src/yandex/yandex_48x48.png)](/) | [![Brave](https://raw.github.com/alrra/browser-logos/master/src/brave/brave_48x48.png)](/) | [![vivaldi](https://raw.github.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png)](/) |\n| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |\n| 49 \u0026 later ✔                                                                                  | 52 \u0026 later ✔                                                                                     | 36 \u0026 later ✔                                                                               | 79 \u0026 later ✔                                                                            | Latest ✔                                                                                      | Latest ✔                                                                                   | Latest ✔                                                                                         |\n\n## Used by extensions in production that has over 100,000+ users.\n\n- [daily.dev](https://daily.dev) in [daily.dev extension](https://r.daily.dev/get)\n- [Jiffy Reader](https://chrome.google.com/webstore/detail/jiffy-reader/lljedihjnnjjefafchaljkhbpfhfkdic) in [ansh/jiffyreader.com](https://github.com/ansh/jiffyreader.com)\n- [kutt-extension](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) in [abhijithvijayan/kutt-extension](https://github.com/abhijithvijayan/kutt-extension)\n- [doubanIMDb](https://chrome.google.com/webstore/detail/doubanimdb/nfibbjnhkbjlgjaojglmmibdjicidini) in [lisongx/doubanIMDb](https://github.com/lisongx/doubanIMDb)\n- [Mooc Assistant](https://chrome.google.com/webstore/detail/mooc-assistant/oebggekgendmoeedkkdkdcdbmfbfeldc) in [unbyte/mooc-assistant](https://github.com/unbyte/mooc-assistant)\n- ArtiPub in [crawlab-team/artipub](https://github.com/crawlab-team/artipub/tree/master/extensions)\n\nand many more...\n\n## Use this template\n\nCreate a new directory and run\n\n```\ncurl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1\n```\n\n## 🚀 Quick Start\n\nEnsure you have\n\n- [Node.js](https://nodejs.org) 10 or later installed\n\nThen run the following:\n\n- `npm install` to install dependencies.\n- `npm run dev:chrome` to start the development server for chrome extension\n- `npm run dev:firefox` to start the development server for firefox addon\n- `npm run dev:opera` to start the development server for opera extension\n- `npm run build:chrome` to build chrome extension\n- `npm run build:firefox` to build firefox addon\n- `npm run build:opera` to build opera extension\n- `npm run build` builds and packs extensions all at once to extension/ directory\n\n### Development\n\n- `npm install` to install dependencies.\n- To watch file changes in development\n\n  - Chrome\n    - `npm run dev:chrome`\n  - Firefox\n    - `npm run dev:firefox`\n  - Opera\n    - `npm run dev:opera`\n\n- **Load extension in browser**\n\n- ### Chrome\n\n  - Go to the browser address bar and type `chrome://extensions`\n  - Check the `Developer Mode` button to enable it.\n  - Click on the `Load Unpacked Extension…` button.\n  - Select your browsers folder in `extension/`.\n\n- ### Firefox\n\n  - Load the Add-on via `about:debugging` as temporary Add-on.\n  - Choose the `manifest.json` file in the extracted directory\n\n- ### Opera\n\n  - Load the extension via `opera:extensions`\n  - Check the `Developer Mode` and load as unpacked from extension’s extracted directory.\n\n### Production\n\n- `npm run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively.\n\nNote: By default the `manifest.json` is set with version `0.0.0`. The webpack loader will update the version in the build with that of the `package.json` version. In order to release a new version, update version in `package.json` and run script.\n\nIf you don't want to use `package.json` version, you can disable the option [here](https://github.com/abhijithvijayan/web-extension-starter/blob/e10158c4a49948dea9fdca06592876d9ca04e028/webpack.config.js#L79).\n\n### Generating browser specific manifest.json\n\nUpdate `source/manifest.json` file with browser vendor prefixed manifest keys\n\n```js\n{\n  \"__chrome__name\": \"SuperChrome\",\n  \"__firefox__name\": \"SuperFox\",\n  \"__edge__name\": \"SuperEdge\",\n  \"__opera__name\": \"SuperOpera\"\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 separating 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\nSee the original [README](https://github.com/abhijithvijayan/wext-manifest-loader) of `wext-manifest-loader` package for more details\n\n## Bugs\n\nPlease file an issue [here](https://github.com/abhijithvijayan/web-extension-starter/issues/new) for bugs, missing documentation, or unexpected behavior.\n\n### Linting \u0026 TypeScript Config\n\n- Shared Eslint \u0026 Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)\n- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)\n\n## License\n\nMIT © [Abhijith Vijayan](https://abhijithvijayan.in)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Fweb-extension-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhijithvijayan%2Fweb-extension-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Fweb-extension-starter/lists"}