Wellington Capoia Posts - Answer Overflow

Wellington Capoia

Explore posts from servers

•Created by Wellington Capoia on 10/23/2024 in #❓・help

How to encrypt on the frontend without exposing the key

I need to encrypt the user's password to send to the backend (and then I will decrypt and encrypt it again with Argon2) because when I send it unencrypted in the browser's network tab, it is exposed. However, whenever I try, I always run into the problem that the key used for encryption/decryption is exposed on the frontend. If I set it as a PRIVATE ENV variable, I can only access it on the Nuxt server, which is also a problem since it will display the text/password that I want to encrypt in the request to the server. How should I do this?

13 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/6/2024 in #👟framework

different WINDOW variables

I have a script that creates an object that I need to use inside the window variable. I insert this script like this:

const script = document.createElement('script')
script.type = 'text/javascript'
script.src = src
script.async = true
script.onload = () => resolve()
script.onerror = () => reject(new Error(`Failed to load script: ${src}`))
document.head.appendChild(script)

const script = document.createElement('script')
script.type = 'text/javascript'
script.src = src
script.async = true
script.onload = () => resolve()
script.onerror = () => reject(new Error(`Failed to load script: ${src}`))
document.head.appendChild(script)

Then, inside some method or hook of vue I try to use the window.WPP object, but it doesn't exist, but if I type it in the console it does exist. I've already tried using world: MAIN but it still doesn't work!

2 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 7/18/2024 in #👟framework

Refused to evaluate a string as JavaScript

Hello, I'm trying to use Vue with the Vuelidate library to validate my inputs, but when I try to validate it gives me the error: 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' http://localhost". How would I go about resolving this? If relevant, follow the code:

import { useVuelidate } from '@vuelidate/core'
import { email, required } from '@vuelidate/validators'

const form = reactive({
    email: '',
    password: '',
    loading: false,
})
const rules = computed(() => {
    return {
        email: { required, email },
        password: { required },
    }
})
const $v = useVuelidate(rules, form)

async function login() {
    $v.value.$validate()
  ....
}

import { useVuelidate } from '@vuelidate/core'
import { email, required } from '@vuelidate/validators'

const form = reactive({
    email: '',
    password: '',
    loading: false,
})
const rules = computed(() => {
    return {
        email: { required, email },
        password: { required },
    }
})
const $v = useVuelidate(rules, form)

async function login() {
    $v.value.$validate()
  ....
}

<template>

<div class="flex flex-col col-span-12">
    <label class="mb-2">Email</label>
    <InputText v-model="form.email" placeholder="Informe seu email" :class="{
                'dark:!border-red-500 dark:!focus:border-red-500 !border-red-500 focus:border-red-500':
                    $v.email.$error,
            }" @change="$v.email.$touch" @keyup.enter="login" />
    <small id="text-error" class="mt-2 p-error">{{
        $v.email.$errors[0]?.$message || "&nbsp;"
        }}</small>
</div>
</template>

<template>

<div class="flex flex-col col-span-12">
    <label class="mb-2">Email</label>
    <InputText v-model="form.email" placeholder="Informe seu email" :class="{
                'dark:!border-red-500 dark:!focus:border-red-500 !border-red-500 focus:border-red-500':
                    $v.email.$error,
            }" @change="$v.email.$touch" @keyup.enter="login" />
    <small id="text-error" class="mt-2 p-error">{{
        $v.email.$errors[0]?.$message || "&nbsp;"
        }}</small>
</div>
</template>

3 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/29/2023 in #👟framework

XMLHttpRequests

hello, I need to use a library to interact with the google sheet api, and it uses axios that uses XMLHttpRequests, how would I make it work inside the messages in background >messages ?!

2 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/20/2023 in #👟framework

Watch STORAGE from CSUI or Send message from backgrounds to CSUI

Hello, I have a CSUI with these settings:

{
   matches: ["https://web.whatsapp.com/"],
   all_frames: true,
   world: "MAIN",
}

What I need is that when changing something in the popup my CSUI is warned, I thought of solving this in two ways: watch storage or send messages from the popup/background to the CSUI. The problem is: I can only use the storage inside the backgrounds (message or port) and I couldn't in any way send a message from the backgrounds to the CSUI. Any suggestion?

3 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/19/2023 in #🔰newbie

Extension runtime is not available

Hi when i try to send a message from a CSUI to a background throws an error "rror: Extension runtime is not available" How do I communicate from a csui with the rest of the application?

3 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/16/2023 in #👟framework

Extension runtime is not available

Hi when i try to send a message from a CSUI to a background throws an error "rror: Extension runtime is not available" How do I communicate from a csui with the rest of the application?

3 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/15/2023 in #👟framework

can i send a message from a CSUI directly to popup.ts and vice versa?

Hello, can I send messages directly from CSUI to popup.ts? or do I really need to create the message inside the background folder and then send it to where I want it?!

2 replies

PD🧩 Plasmo Developers

•Created by Wellington Capoia on 8/14/2023 in #👟framework

How to use a component library on Contents?

Hello, I would like to use a component package (https://primevue.org/) inside the content folder files. To add to popup/options/newtab etc we have a defineOptions method:

defineOptions({
   prepare(app: app) {
     app.use(PrimeVue);
     app.component("Button", Button)
   }
})

defineOptions({
   prepare(app: app) {
     app.use(PrimeVue);
     app.component("Button", Button)
   }
})

Where can I setup primevue correctly. But within the files of the Content folder this does not work, I use the same code but the components do not appear. Would you have any practical examples of how to use the component library within the contents?

22 replies

NNuxt

•Created by Wellington Capoia on 3/2/2023 in #❓・help

How to use asset as background image on style inline?

4 replies

NNuxt

•Created by Wellington Capoia on 12/9/2022 in #❓・help

Service workers

Hi guys, i`m trying to implement Pusher on my nuxt application, but i cant find anything online about it (only vue2). The first thing that i need to do is register a service worker, i see in the nuxt3 docs that server engine have suporte to it, but i cant find exemples to how to implement it, someone can help me ?

1 replies

NNuxt

•Created by Wellington Capoia on 11/24/2022 in #❓・help

UseCookie has a nesting limit?

Hello, I'm trying to persist the store (pinia) but I was having trouble adding an object like this to the cookies: https://api.jsonbin.io/v3/qs/637fb32c65b57a31e6c26bfb However if I delete the array of users it creates the cookie normally, when not deleted it simply generates no error but also does not create the cookie. (Note: I was doing it by hand, because all the existing persistence libraries weren't persisting, probably due to the same problem, after all they all use nuxt's composable.

4 replies

Gaming

Programming