Skip to content

Commit

Permalink
https://github.com/mubaidr/vite-vue3-chrome-extension-v3/issues/75
Browse files Browse the repository at this point in the history
  • Loading branch information
mubaidr committed Jul 15, 2024
1 parent f84afa0 commit caa8c07
Show file tree
Hide file tree
Showing 25 changed files with 1,327 additions and 1,493 deletions.
20 changes: 18 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

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`.

**Please check: [vite-chrome-extension](https://github.com/mubaidr/vite-chrome-extension) for a more simpler template**
_For a basic template, check out: : [vite-chrome-extension](https://github.com/mubaidr/vite-chrome-extension) for a more simpler template_

## Features

Expand Down Expand Up @@ -36,7 +36,6 @@ _Please create an issue if you feel some feature is missing or could be improved
- [`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

Expand Down Expand Up @@ -103,6 +102,23 @@ pnpm i
- `chrome` - Chrome extension
- `firefox` - Firefox extension

### Browser Related Configurations

- `manifest.config.ts` - Base extension manifest with common configuration
- `manifest.chrome.config.ts` - Chrome specific manifest
- `manifest.firefox.config.ts` - Firefox spefic manifest
- `vite.config.ts` - Base vite configuration
- `vite.chrome.config.ts` - Chrome specific vite configuration
- `vite.firefox.config.ts` - Firefox specific vite configuration

### Scripts

- `pnpm dev` - Start development server
- `pnpm build` - Build extension
- `pnpm lint` - Lint files

_You can also use pnpm dev:chrome, pnpm dev:firefox, pnpm build:chrome, pnpm build:firefox, pnpm lint:fix_

### Extra info

In [src/background/index.ts](./src/background/index.ts) you can find an example of chrome.runtime.onInstalled.addListener.
Expand Down
7 changes: 7 additions & 0 deletions manifest.chrome.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineManifest } from '@crxjs/vite-plugin'
import ManifestConfig from './manifest.config'

// @ts-expect-error ManifestConfig provides all required fields
export default defineManifest((_env) => ({
...ManifestConfig,
}))
7 changes: 4 additions & 3 deletions manifest.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { defineManifest } from '@crxjs/vite-plugin'
import { type ManifestV3Export } from '@crxjs/vite-plugin'
import { env } from 'process'
import packageJson from './package.json' assert { type: 'json' }

const { version, name, description, displayName } = packageJson
Expand All @@ -9,7 +10,7 @@ const [major, minor, patch, label = '0'] = version
// split into version parts
.split(/[.-]/)

export default defineManifest(async (env) => ({
export default {
name: env.mode === 'staging' ? `[INTERNAL] ${name}` : displayName || name,
description,
// up to four numbers separated by dots
Expand Down Expand Up @@ -52,4 +53,4 @@ export default defineManifest(async (env) => ({
32: 'src/assets/logo.png',
128: 'src/assets/logo.png',
},
}))
} as ManifestV3Export
61 changes: 8 additions & 53 deletions manifest.firefox.config.ts
Original file line number Diff line number Diff line change
@@ -1,61 +1,16 @@
import { defineManifest } from '@crxjs/vite-plugin'
import packageJson from './package.json' assert { type: 'json' }
import ManifestConfig from './manifest.config'

const { version, name, description, displayName } = packageJson
// Convert from Semver (example: 0.1.0-beta6)
const [major, minor, patch, label = '0'] = version
// can only contain digits, dots, or dash
.replace(/[^\d.-]+/g, '')
// split into version parts
.split(/[.-]/)

export default defineManifest(async (env) => ({
name: env.mode === 'staging' ? `[INTERNAL] ${name}` : displayName || name,
description,
// up to four numbers separated by dots
version: `${major}.${minor}.${patch}.${label}`,
// semver is OK in "version_name"
// version_name: version,
manifest_version: 3,
// browser_specific_settings: {
// gecko: {
// id: '{}',
// strict_min_version: '112.0',
// },
// },
action: {
default_popup: 'src/popup/index.html',
},
// @ts-expect-error ManifestConfig provides all required fields
export default defineManifest((_env) => ({
...ManifestConfig,
background: {
scripts: ['src/background/index.ts'],
type: 'module',
persistent: false,
},
content_scripts: [
{
all_frames: false,
js: ['src/content-script/index.ts'],
matches: ['*://*/*'],
run_at: 'document_end',
},
],
// offline_enabled: false,
host_permissions: [],
permissions: ['storage', 'tabs'],
web_accessible_resources: [
{
matches: ['*://*/*'],
resources: ['src/content-script/index.ts'],
},
{
matches: ['*://*/*'],
resources: ['src/content-script/iframe/index.html'],
},
],
icons: {
16: 'src/assets/logo.png',
24: 'src/assets/logo.png',
32: 'src/assets/logo.png',
128: 'src/assets/logo.png',
},
// @ts-expect-error
permissions: ManifestConfig.permissions.filter(
(permission) => permission !== 'background'
),
}))
106 changes: 53 additions & 53 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,71 +1,54 @@
{
"name": "vite-vue3-chrome-extension-v3",
"displayName": "Vite Vue 3 Chrome Extension",
"type": "module",
"version": "0.0.1",
"private": true,
"description": "A Vue 3 + Vite project for building Chrome extensions",
"repository": {
"type": "git",
"url": "https://github.com/mubaidr/vite-vue3-chrome-extension-v3"
},
"scripts": {
"build": "npm run build:chrome && npm run build:firefox",
"build:chrome": "vite build",
"build:firefox": "vite build -c vite.firefox.config.js",
"dev": "concurrently \"npm run dev:chrome\" \"npm run dev:firefox\"",
"dev:chrome": "vite",
"dev:firefox": "vite build --mode development --watch -c vite.firefox.config.js",
"format": "prettier --write .",
"lint": "eslint . --fix",
"lint:manifest": "web-ext lint --pretty",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit"
},
"dependencies": {
"marked": "^12.0.2",
"marked": "^13.0.2",
"pinia": "^2.1.7",
"vue": "^3.4.27",
"vue-router": "^4.3.3",
"vue": "^3.4.31",
"vue-router": "^4.4.0",
"webextension-polyfill": "^0.12.0"
},
"description": "A Vue 3 + Vite project for building Chrome extensions",
"devDependencies": {
"@antfu/eslint-config": "^2.21.0",
"@crxjs/vite-plugin": "^2.0.0-beta.23",
"@iconify-json/mdi": "^1.1.66",
"@antfu/eslint-config": "^2.22.2",
"@crxjs/vite-plugin": "^2.0.0-beta.25",
"@iconify-json/mdi": "^1.1.67",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"@types/eslint": "~8.56.10",
"@types/node": "^20.14.2",
"@types/node": "^20.14.10",
"@types/webextension-polyfill": "~0.10.7",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/compiler-sfc": "^3.4.27",
"@vueuse/core": "^10.10.0",
"@vue/compiler-sfc": "^3.4.31",
"@vueuse/core": "^10.11.0",
"autoprefixer": "^10.4.19",
"chrome-types": "^0.1.287",
"chrome-types": "^0.1.292",
"concurrently": "^8.2.2",
"cross-env": "^7.0.3",
"daisyui": "^4.12.2",
"eslint": "^9.4.0",
"globals": "^15.4.0",
"postcss": "^8.4.38",
"prettier": "^3.3.1",
"prettier-plugin-tailwindcss": "^0.6.2",
"sass": "^1.77.4",
"daisyui": "^4.12.10",
"eslint": "^9.7.0",
"globals": "^15.8.0",
"postcss": "^8.4.39",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.5",
"sass": "^1.77.8",
"tailwindcss": "^3.4.4",
"terser": "^5.31.1",
"typescript": "^5.4.5",
"unplugin-auto-import": "^0.17.6",
"terser": "^5.31.2",
"typescript": "^5.5.3",
"unplugin-auto-import": "^0.18.0",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.0",
"unplugin-vue-router": "^0.9.1",
"vite": "^5.2.13",
"vite-plugin-pages": "^0.32.2",
"vite-plugin-vue-devtools": "^7.2.1",
"vue-tsc": "^2.0.21",
"web-ext": "^8.0.0",
"unplugin-vue-components": "^0.27.2",
"unplugin-vue-router": "^0.10.0",
"vite": "^5.3.3",
"vite-plugin-pages": "^0.32.3",
"vite-plugin-vue-devtools": "^7.3.6",
"vue-tsc": "^2.0.26",
"web-ext": "^8.2.0",
"webext-bridge": "^6.0.1"
},
"displayName": "Vite Vue 3 Chrome Extension",
"name": "vite-vue3-chrome-extension-v3",
"overrides": {
"@crxjs/vite-plugin": "$@crxjs/vite-plugin"
},
"pnpm": {
"overrides": {},
"peerDependencyRules": {
Expand All @@ -77,7 +60,24 @@
"ignoreMissing": []
}
},
"overrides": {
"@crxjs/vite-plugin": "$@crxjs/vite-plugin"
}
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/mubaidr/vite-vue3-chrome-extension-v3"
},
"scripts": {
"build": "npm run build:chrome && npm run build:firefox",
"build:chrome": "vite build -c vite.chrome.config.ts",
"build:firefox": "vite build -c vite.firefox.config.ts",
"dev": "concurrently \"npm run dev:chrome\" \"npm run dev:firefox\"",
"dev:chrome": "vite -c vite.chrome.config.ts",
"dev:firefox": "vite build --mode development --watch -c vite.firefox.config.ts",
"format": "prettier --write .",
"lint": "eslint . --fix",
"lint:manifest": "web-ext lint --pretty",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit"
},
"type": "module",
"version": "0.0.1"
}
Loading

0 comments on commit caa8c07

Please sign in to comment.