Kocal/vue-web-extension is a boilerplate project for creating browser extensions using Vue.js. It provides a solid foundation for developers to build cross-browser extensions with modern web technologies, including Vue 3, TypeScript, and Vite.

Pros

• Streamlines the process of creating browser extensions with Vue.js
• Supports modern development tools and practices (Vue 3, TypeScript, Vite)
• Includes hot-reloading for faster development
• Provides a well-structured project template with sensible defaults

Cons

• May have a learning curve for developers new to Vue.js or browser extension development
• Limited customization options out-of-the-box (though the project can be modified)
• Requires manual configuration for some advanced extension features
• Documentation could be more comprehensive for complex use cases

Code Examples

1. Creating a new component:

<!-- src/components/HelloWorld.vue -->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="count++">Count is: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()
const count = ref(0)
</script>

2. Defining a content script:

// src/content-scripts/content-script.ts
import { createApp } from 'vue'
import App from './App.vue'

const mountPoint = document.createElement('div')
mountPoint.id = 'my-extension-root'
document.body.appendChild(mountPoint)

createApp(App).mount(mountPoint)

3. Setting up a background script:

// src/background.ts
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed')
})

chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    chrome.tabs.sendMessage(tab.id, { action: 'toggle' })
  }
})

Getting Started

1. Clone the repository:

   git clone https://github.com/Kocal/vue-web-extension.git
   cd vue-web-extension
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Build the extension for production:

   npm run build
   

5. Load the dist folder as an unpacked extension in your browser to test.