{"id":14006986,"url":"https://github.com/JohnBra/vite-web-extension","last_synced_at":"2025-07-24T00:32:39.197Z","repository":{"id":40488752,"uuid":"483428846","full_name":"JohnBra/vite-web-extension","owner":"JohnBra","description":"Vite web extension template. Setup with React, Typescript and TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-11-25T07:19:28.000Z","size":807,"stargazers_count":573,"open_issues_count":0,"forks_count":84,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-11-29T04:42:02.076Z","etag":null,"topics":["react","tailwind","typescript","vite"],"latest_commit_sha":null,"homepage":"","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/JohnBra.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":"2022-04-19T22:30:54.000Z","updated_at":"2024-11-28T20:05:31.000Z","dependencies_parsed_at":"2023-07-27T15:45:17.169Z","dependency_job_id":"dc8097f2-d60a-4710-9549-a2fdf6960e29","html_url":"https://github.com/JohnBra/vite-web-extension","commit_stats":{"total_commits":63,"total_committers":7,"mean_commits":9.0,"dds":0.2063492063492064,"last_synced_commit":"2914338ce1a22d9870608e28d3cfd9d3dd2f0a5b"},"previous_names":["johnbra/web-extension"],"tags_count":6,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnBra%2Fvite-web-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnBra%2Fvite-web-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnBra%2Fvite-web-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnBra%2Fvite-web-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohnBra","download_url":"https://codeload.github.com/JohnBra/vite-web-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227047464,"owners_count":17723093,"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":["react","tailwind","typescript","vite"],"created_at":"2024-08-10T10:01:44.900Z","updated_at":"2025-07-24T00:32:39.178Z","avatar_url":"https://github.com/JohnBra.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"public/icon-128.png\" alt=\"logo\"/\u003e\n\u003ch1\u003e Minimalist Chrome/Firefox Extension Boilerplate with\u003cbr/\u003eReact + Vite + TypeScript + TailwindCSS\u003c/h1\u003e\n\n\u003ch5\u003e\nThis template repository is a side product of my Chrome Extension \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://chrome.google.com/webstore/detail/supatabs/icbcnjlaegndjabnjbaeihnnmidbfigk\"\u003eSupatabs\u003c/a\u003e.\n\u003cbr /\u003e\nIf you tend to have tons of tabs open, or are a OneTab user, make sure to check it out \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://chrome.google.com/webstore/detail/supatabs/icbcnjlaegndjabnjbaeihnnmidbfigk\"\u003ehere\u003c/a\u003e!\n\u003c/h5\u003e\n\n\u003ch5\u003eSupatabs is an example and showcase of what you can develop with this template. (anything you want, really 🚀)\u003c/h5\u003e\n\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Intro](#intro)\n- [Features](#features)\n- [Usage](#usage)\n  - [Getting Started](#gettingStarted) \n  - [Customization](#customization)\n  - [Publish](#publish)\n- [Tech Docs](#tech)\n- [Credit](#credit)\n- [Contributing](#contributing)\n\n\n## Intro \u003ca name=\"intro\"\u003e\u003c/a\u003e\nThis boilerplate is meant to be a minimal quick start for creating chrome/firefox extensions using React, Typescript and Tailwind CSS.\n\nIt includes all possible pages such as **new tab**, **dev panel**, **pop up**, etc., as well as corresponding manifest settings by default.\nYou will likely have to customize/delete some of the pages (see docs below).\n\nYou can build dist files for both Chrome and Firefox with manifest v3.\n\nIf you are looking for a React focused way to access the local storage, I also implemented a chrome local/sync storage hook. The hook works\nwell with this template. [Check it out here](https://gist.github.com/JohnBra/c81451ea7bc9e77f8021beb4f198ab96).\n\n## Features \u003ca name=\"features\"\u003e\u003c/a\u003e\n- [React 19](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS 4](https://tailwindcss.com/)\n- [i18n (optional)](https://developer.chrome.com/docs/extensions/reference/api/i18n)\n- [Cross browser development with polyfill (optional)](https://github.com/mozilla/webextension-polyfill?tab=readme-ov-file#basic-setup-with-module-bundlers)\n- [ESLint](https://eslint.org/)\n- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)\n- [Github Action](https://github.com/JohnBra/vite-web-extension/actions/workflows/ci.yml) to build and zip your extension (manual trigger)\n\n## Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n### Getting Started \u003ca name=\"gettingStarted\"\u003e\u003c/a\u003e\n\n#### Developing and building\nThis template comes with build configs for both Chrome and Firefox. Running\n`dev` or `build` commands without specifying the browser target will build\nfor Chrome by default.\n\n1. Clone this repository or click \"Use this template\"\n2. Change `name` and `description` in `manifest.json`\n3. Run `yarn` or `npm i` (check your node version \u003e= 16)\n4. Run `yarn dev[:chrome|:firefox]`, or `npm run dev[:chrome|:firefox]`\n\nRunning a `dev` command will build your extension and watch for changes in the \nsource files. Changing the source files will refresh the corresponding \n`dist_\u003cchrome|firefox\u003e` folder.\n\nTo create an optimized production build, run `yarn build[:chrome|:firefox]`, or\n`npm run build[:chrome|:firefox]`.\n\n#### Load your extension\nFor Chrome\n1. Open - Chrome browser\n2. Access - [chrome://extensions](chrome://extensions)\n3. Tick - Developer mode\n4. Find - Load unpacked extension\n5. Select - `dist_chrome` folder in this project (after dev or build)\n\nFor Firefox\n1. Open - Firefox browser\n2. Access - [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)\n3. Click - Load temporary Add-on\n4. Select - any file in `dist_firefox` folder (i.e. `manifest.json`) in this project (after dev or build)\n\n### Customization \u003ca name=\"customization\"\u003e\u003c/a\u003e\n\n#### Adding / removing pages\nThe template includes source code for **all** of the extension pages (i.e. New Tab, Dev Tools, Popup, Side Panel\netc.). You will likely have to customize it to fit your needs.\n\nE.g. you don't want the newtab page to activate whenever you open a new tab:\n1. remove the directory `newtab` and its contents in `src/pages`\n2. remove `chrome_url_overrides: { newtab: 'src/pages/newtab/index.html' },` in `manifest.json`\n\nSome pages like the \"Side Panel\" don't work the exact same in Chrome and Firefox. While this template includes\nthe source code for the side panel, it won't automatically be included in the dist file to prevent cross browser\nbuild warnings.\n\nTo include the side panel for Chrome add the following to the `manifest.json`:\n\n```typescript\n{\n  \"manifest_version\": 3,\n  // ...\n  \"permissions\": [\n    \"activeTab\",\n    \"sidePanel\" // \u003c-- permission for sidepanel\n  ],\n  // ...\n  \"side_panel\": {\n    \"default_path\": \"src/pages/panel/index.html\" // \u003c-- tell vite to include it in the build files\n  },\n  // ...\n}\n```\n\nIf you need to declare pages in addition to the manifest pages, e.g. a custom `app` page, create a \nnew folder in the `pages` directory and add the corresponding `.html`, `.tsx` and `.css` \nfiles (see `options/*` for an example to copy). Then include the root html in the `vite.config.base.ts` \nfile under `build.rollupOptions.input` like so:\n\n```typescript\n// ...\nbuild: {\n   rollupOptions: {\n      input: {\n         app: resolve(pagesDir, \"app\", \"index.html\"),\n      },\n      output: {\n         entryFileNames: (chunk) =\u003e `src/pages/${chunk.name}/index.js`,\n      },\n   },\n}\n// ...\n```\n\n#### Styling\nCSS files in the `src/pages/*` directories are not necessary. They are left in there in case you want \nto use it in combination with Tailwind CSS. **Feel free to delete them**.\n\nTailwind can be configured, themed and extended according to the [docs](https://tailwindcss.com/docs/theme).\n\n#### Internationalization (i18n)\nTo enable internationalization set the `localize` flag in the `vite.config.base.ts` to `true`.\n\nThe template includes a directory `locales` with a basic setup for english i18n. Enabling i18n\nwill pull the name and description for your extension from the english translation files instead\nof the manifest.\n\nFollow the instructions in the [official docs](https://developer.chrome.com/docs/extensions/reference/api/i18n#description) \nto add other translations and retrieve them in the extension.\n\nIf you don't need i18n you can ignore the `locales` directory until you need it, as it won't\nbe copied into the build folder unless the `localize` flag is set to `true`.\n\n### Publish your extension to the CWS\u003ca name=\"publish\"\u003e\u003c/a\u003e\nTo upload an extension to the Chrome store you have to pack (zip) it and then upload it to your item \nin the Chrome Web Store.\n\nThis repo includes a Github Action Workflow to create a \n[optimized prod build and the zip file](https://github.com/JohnBra/vite-web-extension/actions/workflows/ci.yml).\n\nTo run the workflow do the following:\n1. Go to the **\"Actions\"** tab in your forked repository from this template\n2. In the left sidebar click on **\"Build and Zip Chrome Extension\"**\n3. Click on **\"Run Workflow\"** and select the main branch, then **\"Run Workflow\"**\n4. Refresh the page and click the most recent run\n5. In the summary page **\"Artifacts\"** section click on the generated **\"vite-web-extension-chrome\"**\n6. Upload this file to the Chrome Web Store as described [here](https://developer.chrome.com/docs/webstore/publish/)\n\n# Tech Docs \u003ca name=\"tech\"\u003e\u003c/a\u003e\n- [Vite](https://vitejs.dev/)\n- [Vite Plugins](https://vitejs.dev/guide/api-plugin.html)\n- [Chrome Extension with manifest 3](https://developer.chrome.com/docs/extensions/mv3/)\n- [Chrome Extension i18n](https://developer.chrome.com/docs/extensions/reference/api/i18n#description)\n- [Cross browser development with webextension-polyfill](https://github.com/mozilla/webextension-polyfill?tab=readme-ov-file#webextension-browser-api-polyfill)\n- [@crxjs/vite-plugin](https://crxjs.dev/vite-plugin)\n- [Rollup](https://rollupjs.org/guide/en/)\n- [Tailwind CSS 4](https://tailwindcss.com/docs/configuration)\n\n# Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\nFeel free to open PRs or raise issues!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnBra%2Fvite-web-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJohnBra%2Fvite-web-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnBra%2Fvite-web-extension/lists"}