Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shershen08/peace-of-mind-extension

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/shershen08/peace-of-mind-extension
Owner: shershen08
Created: 2023-11-07T10:53:05.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2023-11-07T10:53:07.000Z (about 1 year ago)
Last Synced: 2024-04-15T01:56:48.555Z (7 months ago)
Size: 15.6 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        # vite-vue3-browser-extension-v3

[![build](https://github.com/mubaidr/vite-vue3-chrome-extension-v3/actions/workflows/build.yml/badge.svg)](https://github.com/mubaidr/vite-vue3-chrome-extension-v3/actions/workflows/build.yml) [![release](https://github.com/mubaidr/vite-vue3-chrome-extension-v3/actions/workflows/release.yml/badge.svg)](https://github.com/mubaidr/vite-vue3-chrome-extension-v3/actions/workflows/release.yml)

A [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 based on `manifest 3`, `vue3` and `vite`.

## Features

- Vue 3 - Composition API, `Script setup` and more!

- Vue 3 app in Content Script too (template added)

- HMR for extension pages and content scripts

- [`Tailwind`](https://tailwindcss.com/) css And [`daisyUI`](https://daisyui.com/)

- Vue Router setup incuding `vite-plugin-pages` for automatic route registration

- Effortless communications - powered by [`webext-bridge`](https://github.com/zikaari/webext-bridge)

- [Components auto importing](./src/components)

- [Icons](./src/components) - Access to icons from any iconset directly

  - By default [Material Design Icons](https://materialdesignicons.com/cdn/1.6.50-dev/) set is enabled

- [TypeScript](https://www.typescriptlang.org/) - type safe

- `Eslint` & `Prettier` configured for `vue`, `javascript`, `TypeScript`

- [CRXJS Vite Plugin](https://crxjs.dev/vite-plugin) Build a Chrome Extension with Vite

- Github build and release actions

_Please create an issue if you feel some feature is missing or could be improved._

## Pre-packed

### WebExtension Libraries

- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - effortlessly communication between contexts

### Vite Plugins

- [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - File system based route generator for Vite

- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use `browser` and Vue Composition API without importing

- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - components auto import

- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as components

  - [Material Design Icons](https://icon-sets.iconify.design/mdi/) - Material Design Icons

### Vue Plugins

- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs

### UI Frameworks

- [tailwindcss](https://tailwindcss.com) - A utility-first CSS framework

- [daisyUI](https://daisyui.com/) - The most popular component library for Tailwind CSS

Tailwind css `forms` and `typography` plugins are enabled for default styling of form controls.

### Coding Style

- Use Composition API with [`` SFC syntax](https://github.com/vuejs/rfcs/pull/227)

## Use the Template

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/mubaidr/vite-vue3-chrome-extension-v3/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

> If you don't have pnpm installed, run: npm install -g pnpm

```bash

pnpx degit mubaidr/vite-vue3-chrome-extension-v3 my-webext

cd my-webext

pnpm i

```

## Usage

### Folders

- `src` - main source.

  - `content-script` - scripts and components to be injected as `content_script`

    - `iframe` content script iframe vue3 app which will be injected into page

  - `background` - scripts for background.

  - `popup` - popup vuejs application root

    - `pages` - popup pages

  - `options` - options vuejs application root

    - `pages` - options pages

  - `pages` - application pages, common to all views (About, Contact, Authentication etc)

  - `components` - auto-imported Vue components that are shared in popup and options page.

  - `assets` - assets used in Vue components

- `dist` - built files, also serve stub entry for Vite on development.

### Development

```bash

pnpm dev

```

Then **load extension in browser with the `dist/` folder**.

### Build

To build the extension, run

```bash

pnpm build

```

And then pack files under `dist`, you can upload `dist.crx` or `dist.xpi` to appropriate extension store.

## Credits

This template is heavenly inspired by: https://github.com/antfu/vitesse-webext