mubaidr / vite-vue3-chrome-extension-v3 Goto Github PK

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?

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

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?

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:*".

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.

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 ❤️

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

Maybe need some magic?

i use examples from documentation webext-bridge.

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

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?

Add content script example using vue 3

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

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}`
  )
}

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

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

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

How about drop it?

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.

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

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

Hello,

I am very interested in this starter/template project for building some vue/vite powered browser extensions.

When i start the project with

npm run dev it starts fine.

I then try to load the chrome extension from the dist folder as instructed but it shows me:

Uncaught ReferenceError: __DISPLAY_NAME__ is not defined
    at app.vue:12:27
    at callWithErrorHandling (chunk-HS45CFH5.js?v=81710182:1659:19)
    at callWithAsyncErrorHandling (chunk-HS45CFH5.js?v=81710182:1666:17)
    at ReactiveEffect.getter [as fn] (chunk-HS45CFH5.js?v=81710182:3361:16)
    at ReactiveEffect.run (chunk-HS45CFH5.js?v=81710182:435:19)
    at doWatch (chunk-HS45CFH5.js?v=81710182:3462:13)
    at watchEffect (chunk-HS45CFH5.js?v=81710182:3256:10)
    at setup (app.vue:9:1)
    at callWithErrorHandling (chunk-HS45CFH5.js?v=81710182:1659:19)
    at setupStatefulComponent (chunk-HS45CFH5.js?v=81710182:9073:25)

I have tried adding the .env file with the following:

__DISPLAY_NAME__=TEST
__DISPLAY_VERSION__=1.0.0
__DISPLAY_DESCRIPTION__=Test
__DISPLAY_AUTHOR__=Test

But still the browser does not seem to accept the extension.

Thank you for your time!

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

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

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:

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.

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.

"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?"

Use "displayName" from pckage.json

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

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 🙏

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.

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.

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?

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

Related to

• Install
• Update
• Offscreen Document