{"id":10813405,"url":"https://github.com/xiaoluoboding/chrome-ext-starter","last_synced_at":"2025-10-24T01:04:49.548Z","repository":{"id":46038796,"uuid":"393284019","full_name":"xiaoluoboding/chrome-ext-starter","owner":"xiaoluoboding","description":"⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template","archived":false,"fork":false,"pushed_at":"2023-03-25T18:40:44.000Z","size":298,"stargazers_count":147,"open_issues_count":7,"forks_count":16,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-13T05:35:16.794Z","etag":null,"topics":["chrome-extension","chrome-extensions","manifest-v3","vite","vue3"],"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/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":["xiaoluoboding"]}},"created_at":"2021-08-06T06:53:24.000Z","updated_at":"2025-03-28T01:08:50.000Z","dependencies_parsed_at":"2024-06-07T14:30:59.450Z","dependency_job_id":null,"html_url":"https://github.com/xiaoluoboding/chrome-ext-starter","commit_stats":null,"previous_names":["xiaoluoboding/chrome-ext-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fchrome-ext-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fchrome-ext-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fchrome-ext-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fchrome-ext-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/chrome-ext-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799904,"owners_count":21163400,"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":["chrome-extension","chrome-extensions","manifest-v3","vite","vue3"],"created_at":"2024-06-06T22:04:49.317Z","updated_at":"2025-10-24T01:04:49.450Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"TypeScript","readme":"# Modernized Chrome Extension Vite Starter\n\n\u003e A [Vite](https://vitejs.dev/) Powered `Modernized Chrome Extension Manifest V3` ([Chrome](https://developer.chrome.com/docs/extensions/mv3/getstarted/)) Starter Template.\n\n|  Page Type   |                                                             Light Mode                                                              |                                                             Dark Mode                                                              |\n| :----------: | :---------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: |\n|  Popup Page  |  ![](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub-for-repo@latest/chrome-ext-mv3-starter/202107_extpreview_popup_light.png)  |  ![](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub-for-repo@latest/chrome-ext-mv3-starter/202107_extpreview_popup_dark.png)  |\n| Options Page | ![](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub-for-repo@latest/chrome-ext-mv3-starter/202107_extpreview_options_light.png) | ![](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub-for-repo@latest/chrome-ext-mv3-starter/202107_extpreview_options_dark.png) |\n\n## Features\n\n- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)\n- 🥝 Vue 3 - Composition API, [`\u003cscript setup\u003e` syntax](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) and more!\n- 💬 Effortless communications - powered by [`webext-bridge`](https://github.com/antfu/webext-bridge) and [VueUse](https://github.com/antfu/vueuse) storage\n- 🍃 [Windi CSS](https://windicss.org/) - on-demand CSS utilities\n- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe\n- 📦 [Components auto importing](./src/components)\n- 🌟 [Icons](./src/components) - Access to icons from any iconset directly\n- 🌍 [I18N ready](src/locales)\n- 🌛 Dark Mode - support toggle dark mode\n- 📃 Dynamic `manifest.json` with full type support\n\n## Pre-packed\n\n### WebExtension Libraries\n\n- [`webextension-polyfill-ts`](https://github.com/Lusito/webextension-polyfill-ts) - WebExtension browser API Polyfill with types\n- [`webext-bridge`](https://github.com/antfu/webext-bridge) - effortlessly communication between contexts\n\n### Vite Plugins\n\n- [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import\n- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support\n- [`@intlify/vite-plugin-vue-i18n`](https://github.com/intlify/bundle-tools/blob/main/packages/vite-plugin-vue-i18n/README.md) - i18n support\n\n### Vue Plugins\n\n- [`vue-global-api`](https://github.com/antfu/vue-global-api) - use Vue Composition API globally\n- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs\n\n### UI Frameworks\n\n- [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework\n\n### Icons\n\n- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)\n- [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) - icons as Vue components\n\n### Coding Style\n\n- Use Composition API with [`\u003cscript setup\u003e` SFC syntax](https://github.com/vuejs/rfcs/pull/227)\n- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi\n\n### Dev tools\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager\n- [tsup](https://github.com/egoist/tsup) - Zero config TypeScript bundler powered by esbuild\n- [esno](https://github.com/antfu/esno) - TypeScript / ESNext node runtime powered by esbuild\n- [npm-run-all](https://github.com/mysticatea/npm-run-all) - Run multiple npm-scripts in parallel or sequential\n\n## Use the Template\n\n### GitHub Template\n\n[Create a repo from this template on GitHub](https://github.com/xiaoluoboding/chrome-ext-mv3-starter/generate).\n\n### Clone to local\n\nIf you prefer to do it manually with the cleaner git history\n\n\u003e If you don't have pnpm installed, run: npm install -g pnpm\n\n```bash\nnpx degit xiaoluoboding/chrome-ext-mv3-starter my-extension\ncd my-extension\npnpm i\n```\n\n## Usage\n\n### Folders\n\n- `src` - background scripts and content scripts \u0026 frontend for the extension (popup and options).\n  - `manifest.ts` - manifest for the extension.\n- `extension` - extension package root, also holds assets.\n- `scripts` - development helper scripts.\n\n### Development\n\n```bash\npnpm dev\n```\n\nThen **load extension in browser with the `extension/` folder**,\n\n### Build\n\nTo build the extension, run\n\n```bash\npnpm build\n```\n\nAnd then pack files under `extension`.\n\n## Credits\n\nThis is a template derive from [antfu/vitesse-webext](https://github.com/antfu/vitesse-webext)\n\n## Who is using this template?\n\n- [chrome-web-bookmark](https://github.com/xiaoluoboding/chrome-web-bookmark) - A Chrome extension can turn a link as a visual bookmark.\n\n## License\n\n[MIT](./LICENSE) - [@xiaoluoboding](https://github.com/xiaoluoboding)\n","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":["Variations","TypeScript","chrome-extension"],"sub_categories":["Dev tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fchrome-ext-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fchrome-ext-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fchrome-ext-starter/lists"}