{"id":23633295,"url":"https://github.com/nickytonline/unsightdotdev-webext","last_synced_at":"2025-11-08T20:30:24.171Z","repository":{"id":267856520,"uuid":"902568830","full_name":"nickytonline/unsightdotdev-webext","owner":"nickytonline","description":"A browser web extension for the unsight.dev project","archived":false,"fork":false,"pushed_at":"2024-12-15T05:13:27.000Z","size":138,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T04:49:54.176Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nickytonline.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":"2024-12-12T20:32:43.000Z","updated_at":"2024-12-15T05:13:30.000Z","dependencies_parsed_at":"2024-12-12T21:33:12.757Z","dependency_job_id":"65cf1ed2-f952-445d-931a-afc88f08349a","html_url":"https://github.com/nickytonline/unsightdotdev-webext","commit_stats":null,"previous_names":["nickytonline/unsightdotdev-webext"],"tags_count":0,"template":false,"template_full_name":"antfu-collective/vitesse-webext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickytonline%2Funsightdotdev-webext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickytonline%2Funsightdotdev-webext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickytonline%2Funsightdotdev-webext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickytonline%2Funsightdotdev-webext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickytonline","download_url":"https://codeload.github.com/nickytonline/unsightdotdev-webext/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239560735,"owners_count":19659302,"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":[],"created_at":"2024-12-28T04:49:55.460Z","updated_at":"2025-11-08T20:30:24.115Z","avatar_url":"https://github.com/nickytonline.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebExtension Vite Starter\n\nA [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template.\n\n\u003cp align=\"center\"\u003e\n\u003csub\u003ePopup\u003c/sub\u003e\u003cbr/\u003e\n\u003cimg width=\"655\" src=\"https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png\"\u003e\u003cbr/\u003e\n\u003csub\u003eOptions Page\u003c/sub\u003e\u003cbr/\u003e\n\u003cimg width=\"655\" src=\"https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png\"\u003e\u003cbr/\u003e\n\u003csub\u003eInject Vue App into the Content Script\u003c/sub\u003e\u003cbr/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/11247099/130695439-52418cf0-e186-4085-8e19-23fe808a274e.png\"\u003e\n\u003c/p\u003e\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- 🌈 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand Atomic CSS engine.\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- 🖥 Content Script - Use Vue even in content script\n- 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others\n- 📃 Dynamic `manifest.json` with full type support\n\n## Pre-packed\n\n### WebExtension Libraries\n\n- [`webextension-polyfill`](https://github.com/mozilla/webextension-polyfill) - 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- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use `browser` and Vue Composition API without importing\n- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - components auto import\n- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as components\n  - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)\n\n### Vue Plugins\n\n- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs\n\n### UI Frameworks\n\n- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand Atomic CSS engine\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- [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- [web-ext](https://github.com/mozilla/web-ext) - Streamlined experience for developing web extensions\n\n## Use the Template\n\n### GitHub Template\n\n[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-webext/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 antfu/vitesse-webext my-webext\ncd my-webext\npnpm i\n```\n\n## Usage\n\n### Folders\n\n- `src` - main source.\n  - `contentScript` - scripts and components to be injected as `content_script`\n  - `background` - scripts for background.\n  - `components` - auto-imported Vue components that are shared in popup and options page.\n  - `styles` - styles shared in popup and options page\n  - `assets` - assets used in Vue components\n  - `manifest.ts` - manifest for the extension.\n- `extension` - extension package root.\n  - `assets` - static assets (mainly for `manifest.json`).\n  - `dist` - built files, also serve stub entry for Vite on development.\n- `scripts` - development and bundling helper scripts.\n\n### Development\n\n```bash\npnpm dev\n```\n\nThen **load extension in browser with the `extension/` folder**.\n\nFor Firefox developers, you can run the following command instead:\n\n```bash\npnpm dev-firefox\n```\n\n`web-ext` auto reload the extension when `extension/` files changed.\n\n\u003e While Vite handles HMR automatically in the most of the case, [Extensions Reloader](https://chrome.google.com/webstore/detail/fimgfedafeadlieiabdeeaodndnlbhid) is still recommended for cleaner hard reloading.\n\n## Using Gitpod\n\nIf you have a web browser, you can get a fully pre-configured development environment with one click:\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/antfu/vitesse-webext)\n\n### Build\n\nTo build the extension, run\n\n```bash\npnpm build\n```\n\nAnd then pack files under `extension`, you can upload `extension.crx` or `extension.xpi` to appropriate extension store.\n\n## Credits\n\n[![Volta](https://user-images.githubusercontent.com/904724/195351818-9e826ea9-12a0-4b06-8274-352743cd2047.png)](https://volta.net)\n\nThis template is originally made for the [volta.net](https://volta.net) browser extension.\n\n## Variations\n\nThis is a variant of [Vitesse](https://github.com/antfu/vitesse), check out the [full variations list](https://github.com/antfu/vitesse#variations).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickytonline%2Funsightdotdev-webext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickytonline%2Funsightdotdev-webext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickytonline%2Funsightdotdev-webext/lists"}