mubaidr / vite-vue3-chrome-extension-v3

Another vite powered web extension (chrome, firefox, etc.) starter template.

vite-vue3-browser-extension-v3

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3, vue3 and vite.

Please check: vite-chrome-extension for a more simpler template

Features

• Vue 3 - Composition API, Script setup and more!
• Vue 3 app in Content Script too (template added)
• Vue devtools support
• HMR for extension pages and content scripts, with Firefox support
• Sample onInstall & onUpdate pages
• Tailwind css And daisyUI
• Tailwindcss plugins for Typography, forms, prettier and daisy ui
• Vue Router setup incuding unplugin-vue-router for automatic route registration
• vscode recommended settings and extensions for chrome plugin development
• Effortless communications - powered by webext-bridge
• Components auto importing
• Icons - Access to icons from any iconset directly
  • By default Material Design Icons set is enabled
• TypeScript - type safe
• Eslint & Prettier configured for vue, javascript, TypeScript
• CRXJS 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

Vite Plugins

• unplugin-vue-router - File system based route generator for Vite
• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
  • Material Design Icons - Material Design Icons

Vue Plugins

• Pinia - Intuitive, type safe, light and flexible Store for Vue
• VueUse - collection of useful composition APIs

Plugins

• Marked - A markdown parser and compiler. Used for CHANGELOG.md to show in Update page

UI Frameworks

• tailwindcss - A utility-first CSS framework
• daisyUI - The most popular component library for Tailwind CSS

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

WebExtension Libraries

• webext-bridge - effortlessly communication between contexts

Coding Style

• Use Composition API with <script setup> SFC syntax
• Use Composition API with setup SFC syntax in Pinia stores

Use the Template

GitHub Template

Create a repo from this template on GitHub.

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

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

Usage

Project Structure

• 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
  • setup - Page for Install and Update chrome extension events
    • pages - pages for install and update events
  • offscreen - Chrome extension offscreen pages, can be used for audio, screen recording
  • 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
  • chrome - Chrome extension
  • firefox - Firefox extension

Extra info

In src/background/index.ts you can find an example of chrome.runtime.onInstalled.addListener.

We add ?type to the url to tell if it's update or install event. Then in src/setup/pages/index.ts we check for the type and show the appropriate page.

Development

pnpm dev

Then load extension in browser with the dist/ folder.

Build

To build the extension, run

pnpm build

And then pack files under dist/chrome or dist/firefox, you can upload to appropriate extension store.

Contributors

Muhammad Ubaid Raza

Alexander

Jihoon Yi

Null

Credits

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

vite-vue3-chrome-extension-v3's Issues

[Feature] Enable firebase authentication support

[feature request] add some actions to the right click menu

Can you add some template code to create custom action in the right-click menu in all tabs?

i've tried the methods in this, but I see no new actions in my right-click menu on any websites.

I would be grateful if you could offer some help ❤️

I cant get working OnMessage and sendMessage from webext-bridge. No one direction working.

popup => background
background => popup
content-script => popup, background

Maybe need some magic?

i use examples from documentation webext-bridge.

[feature] Add tailwind forms plugin

[Feature] Add oxc plugin for vscode

Add Prefix To Isolate Source Website And Our Plugin

Thank you for such an awesome project🥰! While using it, I've run into some issues, like class name conflicts between Tailwind CSS and the original website's styles.
I think it can add a prefix(to the tailwindcss) by Custom Directives of Vue to isolate the source website and our Chrome plugin like this:

<div v-prefix-class="flex flex-col ...">
  ...
</div>

and it will be:

<div class="custom-prefix-flex custom-prefix-flex-col ...">
  ...
</div>

or we can use some building utils like postcss to add prefix autoly.
What's your take on the two solutions above? If it's feasible, I can try to code it.

[Feature] Add DaisyUI

Add daisy UI: https://github.com/saadeghi/daisyui

Add vue devtools vite plugin

vite-plugin-vue-devtools: https://devtools-next.vuejs.org/guide/vite-plugin

I want to use vue-18n in this project. However there is an error. Can you give me some solution?

vue-i18n.js?v=9913f811:2570 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*".

promise error message

I am running pnpm dev in the console with no errors but when I look in the chrome extensions( console )
I see this error. Any ideas on how to fix?

Migrate to Nuxt

• File-based Routing
• Modular Architecture
• Automatic Code Splitting
• Nuxt layers for sharing base configuration/ design between all extension pages

[Feature] Add tailwind prettier plugin class support

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Chrome V3 Refused to execute inline script ...

Hi,

thank you very much for providing a great Chrome plugin template. This is when I opened a new window using the V3 version through [chrome.tabs.create] and executed a JavaScript code, the console encountered an error as follows:

After trying, I still cannot solve this problem until now...
Can you help me solve this problem? Thank you 🙏

Inject into content script

Thank you for this great project!
Can you guide me how to inject popup into content script? I want to show the whole popup into website page.

limited to iframe size

"Hello, I'm creating a button in a content-script with a fixed position. Everything is working great. But I need a modal window to be displayed across the entire screen when this button is clicked. However, I'm limited by the dimensions of the iframe. What should I do?"

Switch to chrome-types

https://www.npmjs.com/package/chrome-types

On fresh install I get a service worker error when installing the unpacked extension

I am running pnpm dev in the console with no errors but when I look in the chrome extensions I see this error. Any ideas on how to fix?

it seems like extendRoutes has been removed in Vue Router 4.x.

content-script does not use iframe, style issue

content-script/index.ts code

import { createApp } from 'vue'
import App from './content/app.vue'
import './index.scss'

const container = document.createElement('div')
container.id = 'test' 
container.className = 'test' 

const root = document.createElement('div')
root.id = 'test-app'


const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container
shadowDOM.appendChild(root)


document.body.appendChild(container)


const app = createApp(App)

app.config.globalProperties.$app = {
  context: '',
}


app.provide('app', app.config.globalProperties.$app)


app.mount(root)

content-script/content/app.vue

<template>
  <div class="testqwe">
    <div
      class="floating-text"
      style="font-size: 50px; color: red"
    >
      test
    </div>
  </div>
</template>
<style lang="scss">
.floating-text {
 position: fixed;
  top: 50%;
   left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   border-radius: 5px;
}
.testqwe {
  background-color: #ffffff;
}

Neither the styles in index.scss nor the styles in style lang='scss' are taking effect, only the inline styles mentioned above are working. Why is this happening?
I want to create a floating content that appears in the middle of the page, without using an iframe.

pnpm dev results in an error with fresh install

I've installed a fresh instance of this repo and when I run pnpm dev I get this response:

[vite:css] [postcss] Cannot read properties of undefined (reading 'config') file: /__uno.css:undefined:undefined

I can successfully run this repo if I remove the tailwindcss: {}, from postcss.config.cjs

Any ideas on how to fix?

TODO Update to Vite 5

I have seen https://github.com/crxjs/chrome-extension-tools has updated and fixed the Vite 5 problem with @crxjs/[email protected] version.

crxjs/chrome-extension-tools@ce9fe1c: Fix/web accessible resources script modules
crxjs/chrome-extension-tools@48d8c68: Vite 5 moved vite manifest from 'manifest.json' to
'.vite/manifest.json'. This change updates the plugin to use the new location
if Vite major version is >4, old location otherwise.

I haven't tested it yet but it's a goal.

Global error handling to avoid extension context issues

This ensures errors are logged, but extension context is not disconnected.

self.onerror = function (message, source, lineno, colno, error) {
  console.info(
    `Error: ${message}\nSource: ${source}\nLine: ${lineno}\nColumn: ${colno}\nError object: ${error}`
  )
}

[Feature] Add vue-router (pages) support

• add vue-router
• options, popup pages
• setup vite-plugin-pages

Scripts should use `module` type

Related to

• Install
• Update
• Offscreen Document

[Feature] Add offscreen document sample

Fix for the src problem

I have finally fixed it!

Move all html files outside src folder like this:

Add setup page to rollup:

Change ts path inside all html files to relative ts file:

Now everything works as expected:

Drop webextension-polyfill support

I read this comment.
mozilla/webextension-polyfill#329 (comment)

That said, MV3 doesn't need webextension-polyfill at all.

How about drop it?

Question: image paths inside vue components

First of all, great template!

Question: instead of relative image paths like

<img src="../../assets/vite.svg" />

Would it be possible to use the alias defined in vite.config.ts?

<img src="src/assets/vite.svg" />

It's not working with the current setup.

When my plugin opens a local html page, it can't find the js file in the same directory as the page?

Popup page shows Options page

I build source and load it on chrome.

And then I found Popup shows Options page.

Options show it self That's fine.

options.html

    <script type="module" crossorigin src="..\..\assets/index.html-74b33acf.js"></script>
    <link rel="modulepreload" crossorigin href="..\..\assets/base-176afb78.js">

popup.html

    <script type="module" crossorigin src="..\..\assets/index.html-02ab7c9c.js"></script>
    <link rel="modulepreload" crossorigin href="..\..\assets/base-176afb78.js">

common ref is base-176afb78.js. so I investigated.

base-176afb78.js

// It's options.html content
// and lu render options.html contents
function iu(e, t) {
    return so(), oo(xe, null, [hs(" 옵션 페이지 "), ou], 64)
}
const lu = Co(su, [["render", iu], ["__scopeId", "data-v-a4d9e10f"]]);


// It's popup.html content
// du is render popup.html content
function au(e, t) {
    return so(), oo(xe, null, [uu, hs(" 팝업 페이지 "), fu], 64)
}
const du = Co(cu, [["render", au], ["__scopeId", "data-v-15bb346d"]]),


// and root path mapping only options page component (lu).
bu = [{path: "/", component: lu, 
children: [{name: "index", path: "", component: du, props: !0}], props: !0}];
export {Co as _, _u as a, mu as b, pu as c, bu as d, gu as e, so as o, hu as r};

I don't know why, but router info and each app.vue has merged.
so that, when popupt.html trying to access root path. router returns only option pages component.

[TODO] Use "displayName" from pckage.json

Use "displayName" from pckage.json

How do I quickly apply changes from this repository to my plugin?

[Feature] Support live reload for Install & Update pages

Source files (.ts) in dist folder

Why does it generate src folder inside dist folder? Can it be fixed?

I use Elementplus with autoImport but get typescript error，how to resolve

[TODO] Add description to manifest file

[Feature] Add Uno css

All in one support for icons, design: https://unocss.dev/

[Feature] Add on install webpage example

Uncaught SyntaxError: Cannot use import statement outside a module (at inject.ts.js:1:1)

After packaging the js or using the import statement, the browser will report an error

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

Why is this error occurring, here is my repository address: botshen/mock-v3

Please run pnpm i pnpm build and then load the extension in chrome then you can see this error message, what is causing this?

[Feature] Vuejs app in content script

Add content script example using vue 3

[bug] Failed to load picture

I just clone the template and run command pnpm dev, and the vue's logo is broken.

I guess it needs to be placed in public folder?

My platform and os: chrome, mac

Support content-script shadow-dom

[TODO] migrate to unplugin-vue-router

https://www.npmjs.com/package/unplugin-vue-router